/* ===================================================================
   0. VARIABILI — Design System Oro + Crema
   Versione migliorata — Gragraphic S.A.S.
=================================================================== */
:root {
    /* ── TIFFANY — colore primario ── */
  --color-primary:       #0ABAB5;
  --color-primary-light: #81d8d0;
  --color-primary-dark:  #007A75;
  --color-primary-muted: #5DCDC8;
  --color-section:       #007A75;

  /* ── Alias tiffany (usati in tutto il CSS) ── */
  --gold:        #0ABAB5;
  --gold-light:  #B2E4E1;
  --gold-dark:   #005F5B;
  --gold-pale:   #E8F8F7;

  /* ── Alias lav (retro-compat, = tiffany in questo tema) ── */
  --lav:         #0ABAB5;
  --lav-light:   #81d8d0;
  --lav-dark:    #007A75;

  /* ── Palette ghiaccio / acqua ── */
  --warm-white:  #F5FFFE;
  --cream:       #F0FAFA;
  --crema:       #CCF0EE;
  --crema-warm:  #F5FFFE;
  --beige:       #E2F4F2;
  --beige-dark:  #B2E4E1;
  --oro-pale:    #E8F8F7;
  --oro-light:   #5DCDC8;
  --oro-dark:    #005F5B;

  /* ── Sfondi ── */
  --color-white:      #F5FFFE;
  --color-bg:         #F0FAFA;
  --color-gray:       #D8F2F0;
  --color-gray-light: #ECFAF9;
  --bg-beige:         #E2F4F2;
  --bg-beige-dark:    #B2E4E1;

  /* ── Neutri ── */
  --color-dark: #0D4955;
  --color-mid:  #3a7070;
  --dark:       #0D4955;
  --mid:        #3a7070;
  --white:      #F5FFFE;
  --text-light: #3a7070;

  /* ── Overlay ── */
  --overlay-header: rgba(240, 250, 250, 0.97);
  --overlay-dark:   rgba(10, 40, 40, 0.88);

  /* ── Font ── */
  --font-primary: 'Montserrat', sans-serif;
  --font-display: 'Cormorant Garamond', serif;
  --font-d:       'Cormorant Garamond', serif;
  --font-b:       'Montserrat', sans-serif;

  /* ── Dimensioni tipografiche fluide ── */
  --fs-body:    clamp(0.88rem, 1vw, 0.94rem);
  --fs-h1:      clamp(2.6rem, 1.5rem + 4vw, 5rem);
  --fs-h2:      clamp(2rem, 1.25rem + 3vw, 3.4rem);
  --fs-h3:      clamp(1.6rem, 1.25rem + 2vw, 2.6rem);
  --fs-h4:      clamp(1.2rem, 1.2rem + 0.6vw, 1.5rem);
  --fs-menu:    clamp(0.68rem, 0.6rem + 0.3vw, 0.82rem);
  --fs-small:   clamp(0.75rem, 0.65rem + 0.2vw, 0.88rem);
  --fs-eyebrow: 0.70rem;

  /* ── Spaziature ── */
  --section-padding:    clamp(4rem, 6vw, 8rem);
  --section-padding-sm: clamp(2rem, 3.5vw, 4rem);

  /* ── Transizioni ── */
  --transition-base:   0.3s ease;
  --transition-smooth: 0.45s cubic-bezier(0.76, 0.08, 0.24, 0.94);
  --t:                 0.3s ease;
}




/* ============================================================
   PAGINE DI POSIZIONAMENTO SEO
   Da aggiungere al Custom CSS di Helix
   Dipende dal design system già presente nel CSS principale
   ============================================================ */


.itemid-148 #sp-main-body, .itemid-149 #sp-main-body, .itemid-147 #sp-main-body, .itemid-151 #sp-main-body, .itemid-153 #sp-main-body, .itemid-152 #sp-main-body {
     padding: 0px 0px 50px 0px; 
}



/* ──────────────────────────────────────────────────────────
   1. BREADCRUMB (comune a tutte e tre le pagine)
   ────────────────────────────────────────────────────────── */
.sp-breadcrumb {
  background: var(--warm-white);
  border-bottom: 1px solid var(--gold-light);
  font-size: 0.76rem;
  color: var(--color-mid);
  padding: 10px 0;
}
.sp-breadcrumb a {
  color: var(--color-mid) !important;
  text-decoration: none;
}
.sp-breadcrumb a:hover { color: var(--color-primary) !important; }
.sp-breadcrumb .sep { color: var(--color-primary); margin: 0 8px; }


/* ──────────────────────────────────────────────────────────
   2. HERO — variante chiara (Medico Estetico Novara)
   ────────────────────────────────────────────────────────── */
.sp-hero-light {
  background: var(--warm-white);
  overflow: hidden;
}


.article-details .article-full-image img {
    display: inline-block;
  border-radius: 0px!important;
}
/* Colonna immagine */
.sp-hero-img-col {
  position: relative;
  overflow: hidden;
  min-height: 88vh;
}
.sp-hero-img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.97) saturate(0.92);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-hero-img-col:hover img { transform: scale(1.03); }

/* Badge anni esperienza */
.sp-hero-badge {
  position: absolute;
  bottom: 48px; right: 40px;
  z-index: 2;
  background: rgba(13, 73, 85, 0.85);
  border: 1px solid rgba(178, 228, 225, 0.3);
  padding: 24px 30px;
  text-align: center;
}
.sp-hero-badge .num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 300;
  color: var(--gold-light);
  line-height: 1;
  display: block;
}
.sp-hero-badge .lbl {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  display: block;
  margin-top: 4px;
}

/* Colonna testo hero */
.sp-hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 7rem) clamp(2rem, 5vw, 5rem);
  animation: sp-hero-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sp-hero-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Eyebrow con linea a sinistra */
.sp-eyebrow {
  font-family: var(--font-primary);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.sp-eyebrow::before {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: var(--color-primary);
  flex-shrink: 0;
}

/* Eyebrow chiaro (su sfondi scuri) */
.sp-eyebrow-light {
  font-family: var(--font-primary);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.sp-eyebrow-light::before {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: var(--color-primary-light);
  flex-shrink: 0;
}

/* Eyebrow centrato (hero full-bleed Filler) */
.sp-eyebrow-center {
  font-family: var(--font-primary);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.sp-eyebrow-center::before,
.sp-eyebrow-center::after {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: var(--color-primary-light);
  flex-shrink: 0;
}

/* Hero H1 light / dark */
.sp-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.5rem + 4vw, 5rem);
  font-weight: 300;
  line-height: 1.08;
  margin-bottom: 24px;
}
.sp-h1-dark {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.5rem + 4vw, 5rem);
  font-weight: 300;
  line-height: 1.08;
  color: var(--color-white) !important;
  margin-bottom: 24px;
}
.sp-h1-dark em { color: var(--color-primary-light) !important; }

.sp-hero-lead { font-size: 0.94rem; font-weight: 300; color: var(--color-mid); line-height: 1.95; margin-bottom: 32px; }
.sp-hero-lead-dark { font-size: 0.94rem; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.95; margin-bottom: 40px; }


/* ──────────────────────────────────────────────────────────
   3. HERO — variante scura (Botox Novara)
   ────────────────────────────────────────────────────────── */
.sp-hero-dark {
  background: var(--color-dark);
  overflow: hidden;
 
}

.sp-offlabel .sp-h2 {
    color: var(--color-white)!important;
}
.sp-offlabel {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark), var(--color-dark));
}
.sp-offlabel-card h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--gold-light)!important;
    margin-bottom: 12px;
}
.article-details .article-full-image {
     margin-bottom: 0rem; 
}
.article-details figcaption.caption {
       font-size: 0.94rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.95;
    margin-bottom: 40px;
}
.sp-hero-dark h1{color:var(--color-white)!important}
.sp-hero-dark .sp-hero-img-col img {
  filter: brightness(0.65) saturate(0.8);
}
.sp-hero-dark .sp-hero-img-col::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 55%, var(--color-dark) 100%);
}
.sp-hero-dark .sp-hero-text-col {
  padding: clamp(3rem, 6vw, 7rem) clamp(2rem, 5vw, 5rem);
}

/* Stats sotto il CTA nel hero scuro */
.sp-hero-stats {
  display: flex;
  gap: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(178, 228, 225, 0.15);
  flex-wrap: wrap;
  margin-top: 48px;
}
.sp-hero-stat .num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--gold-light);
  display: block;
  line-height: 1;
}
.sp-hero-stat .lbl {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}


/* ──────────────────────────────────────────────────────────
   4. HERO — variante full-bleed (Filler Novara)
   ────────────────────────────────────────────────────────── */
.sp-hero-full {
  min-height: 88vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.sp-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.4) saturate(0.7);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-hero-full:hover .sp-hero-bg { transform: scale(1.02); }
.sp-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,73,85,0.96) 0%, rgba(13,73,85,0.55) 50%, rgba(13,73,85,0.15) 100%);
}
.sp-hero-full-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 100px;
  text-align: center;
  animation: sp-hero-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sp-h1-fullbleed {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 300;
  color: var(--color-white) !important;
  margin-bottom: 24px;
  line-height: 1.08;
}
.sp-h1-fullbleed em { color: var(--color-primary-light) !important; }
.sp-hero-lead-fullbleed {
  font-size: 0.94rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.95;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


/* ──────────────────────────────────────────────────────────
   5. BOTTONI (versioni SEO — prefisso sp- per non collidere)
   ────────────────────────────────────────────────────────── */

/* Fill animato su sfondo chiaro */
.sp-btn-fill {
  position: relative;
  background: transparent;
  border: 1px solid var(--color-dark);
  color: var(--color-dark);
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 36px;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s;
  text-decoration: none;
  display: inline-block;
  border-radius: 0;
}
.sp-btn-fill::before {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 100%;
  background: var(--color-dark);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.sp-btn-fill:hover { color: var(--color-white) !important; }
.sp-btn-fill:hover::before { width: 100%; }

/* Outline tiffany su sfondo chiaro */
.sp-btn-tiffany {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 36px;
  background: transparent;
  transition: all var(--t);
  text-decoration: none;
  display: inline-block;
  border-radius: 0;
}
.sp-btn-tiffany:hover { background: var(--color-primary); color: var(--color-dark) !important; }

/* Fill animato su sfondo scuro */
.sp-btn-fill-light {
  position: relative;
  background: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white)!important;
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 36px;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s;
  text-decoration: none;
  display: inline-block;
  border-radius: 0;
}

.sp-btn-fill-light a, .sp-btn-fill-light a:hover {
  
  color: var(--color-white)!important;
 
}
.sp-btn-fill-light::before {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 100%;
  background: var(--color-primary);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.sp-btn-fill-light:hover { color: var(--color-dark) !important; }
.sp-btn-fill-light:hover::before { width: 100%; }

/* Outline chiaro su sfondo scuro */
.sp-btn-outline-light {
  border: 1px solid var(--color-primary-light);
  color: var(--color-primary-light);
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 36px;
  background: transparent;
  transition: all var(--t);
  text-decoration: none;
  display: inline-block;
  border-radius: 0;
}
.sp-btn-outline-light:hover {
  background: var(--color-primary);
  color: var(--color-dark) !important;
  border-color: var(--color-primary);
}

/* Bottone bianco su CTA tiffany */
.sp-btn-white {
  background: var(--color-white);
  color: var(--color-primary-dark) !important;
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 36px;
  transition: all var(--t);
  text-decoration: none;
  display: inline-block;
  border-radius: 0;
  white-space: nowrap;
}
.sp-btn-white:hover { background: var(--color-dark); color: var(--color-white) !important; }

.nav-tabs {
    --bs-nav-tabs-border-width: 0px!important;
    
}
/* ──────────────────────────────────────────────────────────
   6. SECTION LABEL (h-tag di sezione con linea)
   ────────────────────────────────────────────────────────── */
.sp-section-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-section-label::after {
  content: '';
  flex: 1;
  max-width: 40px;
  height: 1px;
  background: var(--gold-light);
}
.sp-section-label-light { color: var(--color-primary-light) !important; }
.sp-section-label-light::after { background: rgba(178, 228, 225, 0.4) !important; }


/* ──────────────────────────────────────────────────────────
   7. BIO IMMAGINE con decorazioni angolari
   ────────────────────────────────────────────────────────── */
.sp-bio-img-wrap {
  position: relative;
  overflow: visible;
  padding-bottom: 48px;
}
.sp-bio-img-wrap .sp-img-inner {
  overflow: hidden;
}
.sp-bio-img-wrap .sp-img-inner img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: 50% 10%;
  filter: brightness(0.97) saturate(0.92);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-bio-img-wrap:hover .sp-img-inner img { transform: scale(1.03); }

.sp-acc-lav {
  position: absolute; bottom: -15px; left: -15px;
  width: 80px; height: 80px;
  border-bottom: 1.5px solid var(--color-primary);
  border-left:   1.5px solid var(--color-primary);
  pointer-events: none;
}
.sp-acc-oro {
  position: absolute; top: -15px; right: -15px;
  width: 120px; height: 120px;
  border-top:   2px solid var(--gold-light);
  border-right: 2px solid var(--gold-light);
  pointer-events: none;
}

.sp-bio-quote {
  position: absolute;
  bottom: 0; right: -8px;
  background: var(--warm-white);
  padding: 22px 28px;
  max-width: 300px;
  border-left: 3px solid var(--color-primary);
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--color-dark);
  line-height: 1.55;
  box-shadow: 0 8px 32px rgba(10, 186, 181, 0.15);
  z-index: 2;
}
.sp-bio-quote cite {
  font-family: var(--font-primary);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-style: normal;
  margin-top: 8px;
  display: block;
}

/* Griglia credenziali sotto la bio */
.sp-creds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--beige-dark);
  margin-top: 40px;
}
.sp-credential {
  background: var(--warm-white);
  padding: 20px 18px;
  transition: background var(--t);
}
.sp-credential:hover { background: var(--color-bg); }
.sp-cred-label {
  font-family: var(--font-primary);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 5px;
}
.sp-cred-val {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-dark);
  margin: 0;
}


/* ──────────────────────────────────────────────────────────
   8. TREATMENT CARDS (griglia trattamenti su sfondo scuro)
      Riusa .treatment-card del CSS principale ma con prefisso sp-
      per le pagine SEO dove i treatment sono su sfondo gradient
   ────────────────────────────────────────────────────────── */

.sp-treatments {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark), var(--color-dark));
}

.sp-perche {
    background: var(--beige);
}

.sp-faq {
    background: var(--warm-white);
}

.sp-cta {
    background: var(--color-primary);
}

.sp-cta h3 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.25rem + 2vw, 2.6rem);
    font-weight: 300;
    color: var(--color-white)!important;
}

.sp-cta h3 em {
    color: var(--color-dark)!important;
}

.sp-faq-item:nth-child(odd) {
    border-right: 1px solid var(--gold-light);
}
.sp-faq-item {
    padding: 28px;
    border-bottom: 1px solid var(--gold-light);
}
.sp-treatment-card {
  background: transparent;
  border: 1px solid var(--color-primary-light);
  padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.2rem, 2vw, 1.8rem);
  position: relative;
  overflow: hidden;
  transition: background 0.35s, transform 0.3s, box-shadow 0.3s;
  height: 100%;
}
.sp-treatment-card:hover {
  background: var(--color-primary-dark);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.sp-treatment-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--color-primary-light);
  transition: height 0.4s;
  z-index: 1;
}
.sp-treatment-card:hover::before { height: 100%; }
.sp-t-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 12px;
  display: block;
  transition: color 0.4s;
}
.sp-treatment-card:hover .sp-t-num { color: var(--beige-dark); }
.sp-t-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 10px;
  line-height: 1.3;
}
.sp-t-desc {
  font-size: var(--fs-body);
  color: var(--color-primary-light);
  line-height: 1.8;
  font-weight: 300;
  transition: color 0.4s;
  margin: 0;
}
.sp-treatment-card:hover .sp-t-desc { color: rgba(245, 255, 254, 0.8); }


/* ──────────────────────────────────────────────────────────
   9. PERCHÉ CARDS
   ────────────────────────────────────────────────────────── */
.sp-perche-card {
  background: var(--warm-white);
  padding: 36px 28px;
  border-top: 3px solid transparent;
  transition: border-color var(--t), background var(--t);
  height: 100%;
}
.sp-perche-card:hover {
  border-top-color: var(--color-primary);
  background: var(--color-bg);
}
.sp-perche-icon {
  width: 48px; height: 48px;
  margin-bottom: 20px;
  border: 1px solid var(--gold-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-perche-icon svg { width: 22px; height: 22px; stroke: var(--color-primary); fill: none; stroke-width: 1.5; }
.sp-perche-card h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; color: var(--color-dark); margin-bottom: 12px; }
.sp-perche-card p { font-size: 0.85rem; color: var(--color-mid); line-height: 1.75; margin: 0; }


/* ──────────────────────────────────────────────────────────
   10. FAQ — due varianti
   ────────────────────────────────────────────────────────── */

/* Griglia 2 col (Medico Estetico) */
.sp-faq-grid .sp-faq-item { padding: 28px; border-bottom: 1px solid var(--gold-light); }
.sp-faq-grid .col-md-6:nth-child(odd) .sp-faq-item { border-right: 1px solid var(--gold-light); }

/* Lista unica (Botox) */
.sp-faq-list .sp-faq-item { border-bottom: 1px solid var(--gold-light); padding: 28px 0; }
.sp-faq-list .sp-faq-item:last-child { border-bottom: none; }

/* Colonne (Filler) */
.sp-faq-col { display: flex; flex-direction: column; gap: 28px; }
.sp-faq-col .sp-faq-item h4 { padding-bottom: 10px; border-bottom: 1px solid var(--gold-light); }

/* Stili comuni FAQ */
.sp-faq-item h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-dark);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sp-faq-item h4::after {
  content: '+';
  color: var(--color-primary);
  font-size: 1.3rem;
  font-family: var(--font-primary);
  font-weight: 300;
  flex-shrink: 0;
  margin-left: 16px;
}
.sp-faq-col .sp-faq-item h4::after { display: none; }
.sp-faq-item p { font-size: 0.86rem; color: var(--color-mid); line-height: 1.8; margin: 0; max-width: 680px; }


/* ──────────────────────────────────────────────────────────
   11. AREA CARDS (Botox — zona trattabile)
   ────────────────────────────────────────────────────────── */
.sp-area-card {
  background: var(--warm-white);
  border: 1px solid var(--gold-light);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
  height: 100%;
}
.sp-area-card:hover {
  box-shadow: 0 12px 32px rgba(10, 186, 181, 0.12);
  transform: translateY(-4px);
}
.sp-area-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
  z-index: 1;
}
.sp-area-card:hover::before { transform: scaleX(1); }
.sp-area-num {
  position: absolute; top: 20px; right: 24px;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(10, 186, 181, 0.1);
  line-height: 1;
}
.sp-area-tag {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: block;
}
.sp-area-card h4 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; color: var(--color-dark); margin-bottom: 10px; }
.sp-area-card p { font-size: 0.85rem; color: var(--color-mid); line-height: 1.75; margin: 0; }


/* ──────────────────────────────────────────────────────────
   12. OFF-LABEL CARDS (Botox — sfondo gradient scuro)
   ────────────────────────────────────────────────────────── */
.sp-offlabel-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(178, 228, 225, 0.15);
  padding: 36px 28px;
  transition: background 0.3s;
  height: 100%;
}
.sp-offlabel-card:hover { background: rgba(10, 186, 181, 0.1); }
.sp-offlabel-card h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; color: var(--gold-light); margin-bottom: 12px; }
.sp-offlabel-card p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); line-height: 1.75; margin: 0; }


/* ──────────────────────────────────────────────────────────
   13. HIGHLIGHT BOX (Botox — "Perché affidarsi a un medico")
   ────────────────────────────────────────────────────────── */
.sp-highlight {
  background: var(--beige);
  padding: 36px;
  border-left: 3px solid var(--color-primary);
}
.sp-highlight h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; color: var(--color-dark); margin-bottom: 12px; }
.sp-highlight p { font-size: 0.86rem; color: var(--color-mid); margin: 0; }

/* Info list (Botox — specs tecniche) */
.sp-info-list { list-style: none; padding: 0; margin: 0; }
.sp-info-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--gold-light);
  font-size: 0.88rem;
  color: var(--color-mid);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.sp-info-list li::before { content: '—'; color: var(--color-primary); flex-shrink: 0; }


/* ──────────────────────────────────────────────────────────
   14. STEPS (Botox — percorso in 4 step)
       Riusa .step-circle del CSS principale
   ────────────────────────────────────────────────────────── */
.sp-step { text-align: center; padding: 0 clamp(1rem, 3vw, 3rem); }
.sp-step-circle {
  width: 80px; height: 80px;
  border: 1.5px solid var(--color-primary);
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 300;
  color: var(--color-primary);
  transition: background var(--t), color var(--t), transform var(--t);
}
.sp-step:hover .sp-step-circle {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.08);
}
.sp-step h4 { font-family: var(--font-primary); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-dark); margin-bottom: 10px; }
.sp-step p { font-size: 0.82rem; color: var(--color-mid); line-height: 1.65; margin: 0; }


/* ──────────────────────────────────────────────────────────
   15. TIPO LIST (Filler — lista trattamenti verticale)
   ────────────────────────────────────────────────────────── */
.sp-tipo-item {
  background: var(--warm-white);
  display: grid;
  grid-template-columns: 80px 1fr;
  border-bottom: 1px solid var(--gold-light);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.2s;
}
.sp-tipo-item:last-child { border-bottom: none; }
.sp-tipo-item:hover {
  box-shadow: 0 8px 24px rgba(10, 186, 181, 0.1);
  transform: translateX(4px);
}
.sp-tipo-num {
  background: var(--color-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 300;
  color: var(--color-primary-light);
  padding: 32px 0;
}
.sp-tipo-body { padding: 28px 36px; }
.sp-tipo-tag { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 8px; display: block; }
.sp-tipo-body h4 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; color: var(--color-dark); margin-bottom: 10px; }
.sp-tipo-body p { font-size: 0.88rem; color: var(--color-mid); line-height: 1.75; margin: 0; }


/* ──────────────────────────────────────────────────────────
   16. FILOSOFIA WATERMARK (Filler)
   ────────────────────────────────────────────────────────── */
.sp-philosophy { position: relative; overflow: hidden; }

.sp-philosophy > * { position: relative; z-index: 1; }

.sp-blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.5rem);
  font-weight: 300; font-style: italic;
  line-height: 1.5;
  color: var(--color-dark);
  border: none;
  border-left: 3px solid var(--color-primary);
  padding: 16px 0 16px 32px;
  background: transparent;
  margin: 0 0 32px;
}
.sp-blockquote cite {
  font-family: var(--font-primary);
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-dark);
  font-style: normal;
  display: block;
  margin-top: 8px;
}

.sp-principle { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; }
.sp-principle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; margin-top: 8px; }
.sp-principle h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--color-dark); margin-bottom: 6px; }
.sp-principle p { font-size: 0.85rem; color: var(--color-mid); margin: 0; }




/* ──────────────────────────────────────────────────────────
   17. CORRELATI (Filler — trattamenti collegati)
   ────────────────────────────────────────────────────────── */
.sp-correlato {
  background: var(--color-bg);
  padding: 32px;
  border-top: 3px solid transparent;
  transition: border-color var(--t);
  height: 100%;
}
.sp-correlato:hover { border-top-color: var(--color-primary); }
.sp-correlato h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--color-dark); margin-bottom: 12px; }
.sp-correlato p { font-size: 0.85rem; color: var(--color-mid); line-height: 1.75; margin-bottom: 20px; }
.sp-correlato a { font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary) !important; border-bottom: 1px solid var(--color-primary); padding-bottom: 2px; text-decoration: none; }


/* ──────────────────────────────────────────────────────────
   18. CTA BLOCK
   ────────────────────────────────────────────────────────── */
.sp-cta-block { background: var(--color-primary)!important }
.sp-cta-block h3 { font-family: var(--font-display); font-size: clamp(1.6rem, 1.25rem + 2vw, 2.6rem); font-weight: 300; color: var(--color-white) !important; }
.sp-cta-block h3 em { color: var(--color-dark) !important }
.sp-cta-block p { color: rgba(255, 255, 255, 0.75); margin-top: 12px!important}


/* ──────────────────────────────────────────────────────────
   19. ABOUT-QUOTE (Filler — citazione in evidenza)
   ────────────────────────────────────────────────────────── */
.sp-about-quote {
  font-family: var(--font-display);
  font-size: 1.5rem; font-style: italic; font-weight: 300;
  color: var(--color-primary-dark);
  border-left: 2px solid var(--color-primary);
  padding: 16px 0 16px 24px;
  margin: 0;
  line-height: 1.5;
}
.sp-about-quote cite {
  font-family: var(--font-primary);
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-dark);
  font-style: normal;
  display: block;
  margin-top: 8px;
}


/* ──────────────────────────────────────────────────────────
   20. RESPONSIVE
   ────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Hero immagine */
  .sp-hero-img-col { min-height: 55vw; }
  .sp-hero-dark .sp-hero-img-col::after { display: none; }
  .sp-hero-text-col { padding: 3rem 1.5rem; }

  /* Hero full-bleed */
  .sp-hero-full { min-height: 70vh; }
  .sp-hero-full-content { padding-bottom: 64px; }

  /* Badge nascosto su mobile */
  .sp-hero-badge { display: none; }

  /* Bio */
  .sp-bio-quote { position: static; margin-top: 20px; max-width: 100%; }
  .sp-acc-lav, .sp-acc-oro { display: none; }
  .sp-bio-img-wrap .sp-img-inner img { height: 320px; }

  /* FAQ griglia */
  .sp-faq-grid .col-md-6:nth-child(odd) .sp-faq-item { border-right: none; }

  /* Tipo list */
  .sp-tipo-item { grid-template-columns: 60px 1fr; }
  .sp-tipo-num { font-size: 1.1rem; padding: 24px 0; }

  /* Filosofia blockquote */
  .sp-blockquote { padding: 0 0 0 16px; }

  /* Steps */
  .sp-step-circle { width: 64px; height: 64px; }
}

@media (max-width: 480px) {
  .sp-hero-full-content { padding-bottom: 48px; }
}
/* ===================================================================
   1. BASE — Reset e tipografia
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background: var(--color-bg) !important;
  color: var(--dark) !important;
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body) !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  overflow-x: hidden;
}

.cc-revoke, .cc-window {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body) !important;
}
#cookieconsent\:desc > a.cc-link.cc-cookie,
#cookieconsent\:desc > a.cc-link.cc-privacy {
  color: var(--color-white) !important;
}

.cc-revoke.cc-top {
  right: 0 !important;
  font-size: 12px;
  top: auto !important;
  bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#sp-page-builder > div.page-header {
  position: absolute !important;
  top: -9999999999px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--dark) !important;
  line-height: 1.1 !important;
}

h1, .h1 { font-size: var(--fs-h1) !important; font-weight: 400 !important; }
h2, .h2 { font-size: var(--fs-h2) !important; font-weight: 300 !important; }
h3, .h3 { font-size: var(--fs-h3) !important; font-weight: 300 !important; }
h4, .h4 { font-size: var(--fs-h4) !important; font-weight: 400 !important; }

a {
  color: var(--color-primary) !important;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-primary-dark) !important;
}

em {
  color: var(--color-primary) !important;
  font-style: italic !important;
}

/* ===================================================================
   2. TOP BAR
=================================================================== */
#sp-top-bar {
  background: var(--color-section) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 7px 0 !important;
  font-size: var(--fs-small) !important;
}

#sp-top1 ul.sp-contact-info li span,
#sp-top1 ul.sp-contact-info li a {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.76rem !important;
  font-family: var(--font-primary) !important;
}

#sp-top1 ul.sp-contact-info li a:hover { color: var(--gold-light) !important; }
.sp-contact-info .ico               { color: var(--gold-light) !important; }
.social-top a                       { color: rgba(255,255,255,0.5) !important; font-size: 0.76rem !important; }
.social-top a:hover                 { color: var(--gold-light) !important; }

/* ===================================================================
   3. HEADER
=================================================================== */
#sp-header {
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(201, 169, 110, 0.15) !important;
  transition: background var(--transition-smooth), height var(--transition-smooth), box-shadow var(--transition-smooth) !important;
  z-index: 100 !important;
}

#sp-header.sticky {
  background: var(--overlay-header) !important;
  height: 60px !important;
  border-bottom: 1px solid var(--gold-pale) !important;
  box-shadow: 0 4px 28px rgba(155, 132, 192, 0.14) !important;
}

/* Logo */
.sp-logo a, .sp-logo span, #sp-logo a {
  font-family: var(--font-display) !important;
  font-size: 1.9rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: var(--dark) !important;
}

.sp-logo a:hover     { color: var(--color-primary) !important; }
.sp-logo em, #sp-logo em {
  color: var(--color-primary) !important;
  font-style: italic !important;
}

/* Menu */
.sp-megamenu-parent > li > a,
#sp-menu ul.sp-megamenu-parent > li > a {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-menu) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--dark) !important;
  transition: color var(--transition-base) !important;
  line-height: 48px !important;
}

.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li.active > a {
  color: var(--color-primary) !important;
  background: transparent !important;
}

/* CTA Prenota */
.sp-megamenu-parent > li.nav-cta > a, .nav-cta > a {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  padding: 9px 24px !important;
  line-height: 1.5 !important;
  transition: background var(--transition-base) !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item {
   
    border-bottom: 1px solid var(--color-primary-light) !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {
    color: var(--gold-dark) !important;
    line-height: normal  !important;
    font-weight: 600;
}

.nav-cta > a:hover { background: var(--color-primary-dark) !important; }

.sp-page-title {
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
}
.sp-page-title .sp-page-title-heading {
  font-size: var(--fs-h2) !important;
  color: var(--color-white) !important;
}

#sp-menu ul.social-icons a {
  color: var(--color-dark) !important;
  font-size: x-large !important;
}
/* ── Social Icons ── */
.social-icons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}
.social-icons li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  transition: transform var(--transition-base), filter var(--transition-base) !important;
  text-decoration: none !important;
}
.social-icons li a:hover {
  transform: translateY(-3px) !important;
  filter: brightness(1.1) !important;
}
.social-icons li a span {
  font-size: 1rem !important;
  color: #fff !important;
}

/* Facebook */
.social-icon-facebook a {
  background: #1877F2 !important;
}

/* Instagram */
.social-icon-instagram a {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
}

/* WhatsApp */
.social-icon-whatsapp a {
  background: #25D366 !important;
}
/* ===================================================================
   4. BOTTONI
=================================================================== */

/* Primario — fill animato */
.btn-primary, .sppb-btn-primary {
  position: relative !important;
  background: transparent !important;
  border: 1px solid var(--color-dark) !important;
  color: var(--color-dark) !important;
  font-family: var(--font-primary) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 14px 36px !important;
  transition: color var(--transition-base) !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.btn-primary::before, .sppb-btn-primary::before {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 100% !important;
  background: var(--color-dark) !important;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: -1 !important;
}

.btn-primary:hover, .sppb-btn-primary:hover           { color: var(--color-white) !important; }
.btn-primary:hover::before, .sppb-btn-primary:hover::before { width: 100% !important; }

/* Secondario — oro */
.btn-secondary, .sppb-btn-secondary {
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: var(--font-primary) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  transition: all var(--transition-base) !important;
}
.btn-secondary:hover, .sppb-btn-secondary:hover {
  background: var(--color-primary) !important;
  color: var(--color-dark) !important;
}

/* Default */
.btn-default, .sppb-btn-default {
  background: transparent !important;
  border: 1px solid var(--color-mid) !important;
  color: var(--color-mid) !important;
  border-radius: 0 !important;
  font-family: var(--font-primary) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: all var(--transition-base) !important;
}
.btn-default:hover, .sppb-btn-default:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* Success — usato nel form contatti */
.sppb-btn-success {
  position: relative !important;
  background: transparent !important;
  border: 1.5px solid var(--gold-light) !important;
  color: var(--white) !important;
  font-family: var(--font-primary) !important;
  font-size: 0.70rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 13px 34px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.btn-success::before, .sppb-btn-success::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--gold) !important;
  transition: left var(--transition-base) !important;
  z-index: -1;
}
.btn-success:hover::before, .sppb-btn-success:hover::before { left: 0; }
.btn-success:hover, .sppb-btn-success:hover { color: var(--color-white) !important; }

/* ===================================================================
   5. OFF-CANVAS MENU MOBILE
=================================================================== */
.offcanvas-menu { background: var(--color-primary) !important; color: #fff !important; }

.offcanvas-menu .offcanvas-inner a,
.offcanvas-menu .offcanvas-inner ul.menu > li a {
  color: rgba(255, 255, 255, 1) !important;
  font-family: var(--font-primary) !important;
  font-size: 1rem !important;
  letter-spacing: 0.1em !important;
  font-weight: 400;
}

.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler {
  color: rgba(255, 255, 255, 1) !important;
}

.offcanvas-menu .fa, .offcanvas-menu .fab,
.offcanvas-menu .far, .offcanvas-menu .fas   { color: var(--color-primary-light) !important; }
.burger-icon > span                          { background-color: var(--color-primary) !important; }
.close-offcanvas .burger-icon > span         { background-color: rgba(255, 255, 255, 1) !important; }
.offcanvas-overlay                           { background: rgba(255, 255, 255, 0.6) !important; }
.offcanvas-menu .offcanvas-inner a:hover     { color: var(--gold-light) !important; }

/* ===================================================================
   6. HERO
=================================================================== */
#hero-viola .sppb-carousel-inner > .sppb-item > a > img,
.sppb-carousel-inner > .sppb-item > img,
#hero-viola .sppb-img-responsive {
  max-width: 100%;
  height: 85vh !important;
}

.hero-deco {
  position: absolute;
  top: 40px; right: 40px;
  z-index: 3;
  width: 80px; height: 80px;
  border-top: 1.5px solid var(--gold);
  border-right: 1.5px solid var(--gold);
  opacity: 0.5;
}

/* Eyebrow generico */
.sp-page-title-sub-heading,
.hero-eyebrow,
.sppb-addon.hero-eyebrow .sppb-addon-title {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-eyebrow) !important;
  font-weight: 700 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  display: flex;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 5px !important;
}

.sppb-addon.hero-eyebrow .sppb-addon-title::before,
.sp-page-title-sub-heading::before {
  content: '' !important;
  display: block !important;
  width: 28px !important;
  height: 1px !important;
  background: var(--color-primary) !important;
  flex-shrink: 0 !important;
}

.ew-oro { color: var(--gold) !important; }
.sppb-addon.hero-eyebrow.ew-oro .sppb-addon-title { color: var(--gold) !important; }
.sppb-addon.hero-eyebrow.ew-oro .sppb-addon-title::before,
.sp-page-title-sub-heading.ew-oro::before { background: var(--gold) !important; }

#aree .sppb-addon.hero-eyebrow .sppb-addon-title,
#sppb-addon-1771856613890 > div {
  justify-content: center !important;
  text-align: center !important;
  display: flex !important;
}

.section-label {
  font-size: var(--fs-eyebrow) !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::after {
  content: '';
  flex: 1;
  max-width: 40px;
  height: 1px;
  background: var(--gold-light);
}

/* Tags trattamenti */
.treatment-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 30px; }
.tag {
  border: 1px solid var(--color-primary);
  color: var(--color-primary-dark);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  padding: 5px 14px;
}

/* Layout trattamenti alternato */
.treatment-item    { background: var(--cream); border-bottom: 1px solid var(--gold-light); }
.treatment-item-2  { background: var(--color-bg); border-bottom: 1px solid var(--gold-light); }
.treatment-content { padding: 60px clamp(15px, 5vw, 70px); }

.treatment-image img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.treatment-item:hover .treatment-image img { transform: scale(1.04); }

/* Hero: titolo H1 */
.hero-title .sppb-addon-title,
.hero-title h1, .hero-title div {
  font-family: var(--font-display) !important;
  font-size: var(--fs-h1) !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.06 !important;
}
.hero-title em { color: var(--color-primary) !important; }

.hero-h1 {
  margin-bottom: 16px;
  font-weight: 300;
  font-size: var(--fs-h1) !important;
  font-family: var(--font-d);
  line-height: normal;
}
.hero-h1 em { color: var(--lav); }

/* Hero: sottotitolo */
.hero-subtitle .sppb-addon-title,
.hero-subtitle div, .hero-sub h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(1rem, 1.6vw, 1.25rem) !important;
  font-weight: 300 !important;
  color: var(--color-mid) !important;
  letter-spacing: 0.07em !important;
  margin-bottom: 26px !important;
}

/* Hero: descrizione */
.hero-desc .sppb-addon-title,
.hero-desc div, .hero-desc {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body);
  font-weight: 300 !important;
  color: var(--color-mid) !important;
  line-height: 1.95 !important;
  margin-bottom: 44px;
}

/* Divider oro */
.sppb-addon-divider .sppb-divider,
.sppb-divider, .hero-div {
  border-color: var(--gold) !important;
  width: 48px; height: 1px;
  margin-bottom: 28px;
  background: linear-gradient(to right, var(--lav-light), var(--oro-light));
}

/* Hero decorazioni radiali */
.hero::before {
  content: '';
  position: absolute;
  bottom: -120px; left: -120px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,151,58,0.06), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  top: 80px; right: 0;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155,132,192,0.07), transparent 70%);
  pointer-events: none;
}

/* Animazione entrata hero */
.hero-l {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3rem, 6vw, 7rem) clamp(2rem, 5vw, 6rem);
  animation: hero-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Badges */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.badge {
  font-family: var(--font-b);
  font-size: var(--fs-eyebrow);
  font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 14px; border: 1px solid;
  display: inline-flex; align-items: center; gap: 5px;
}
.b-est { background: rgba(155,132,192,0.1);  color: var(--lav-dark);  border-color: rgba(155,132,192,0.35); }
.b-ger { background: var(--oro-pale);         color: var(--oro-dark);  border-color: rgba(196,151,58,0.3); }
.b-nut { background: rgba(155,132,192,0.07); color: var(--mid);       border-color: rgba(200,184,223,0.5); }

/* Badge anni esperienza */
.hero-badge {
  background: rgba(0, 122, 117, 0.75) !important;
  border: 1px solid rgba(200, 184, 223, 0.3) !important;
  padding: 24px 30px !important;
  text-align: center !important;
  position: absolute; bottom: 50px; right: 44px; z-index: 2;
}

/* ── MIGLIORAMENTO: counter anni ── */
/* Force il numero ad essere visibile anche prima dell'IntersectionObserver */
#sppb-addon-1771856613791 .sppb-animated-number {
  color: var(--gold-light) !important;
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  opacity: 1 !important; /* evita che rimanga a 0 se il JS non parte */
}
#sppb-addon-1771856613791 .sppb-addon-counter-title {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-family: var(--font-primary) !important;
}

/* Overlay stat "about" */
.about-image-overlay {
  position: absolute; bottom: 40px; right: -20px;
  background: var(--cream); border: 1px solid var(--gold-light);
  padding: 24px 32px; width: 220px; z-index: 10;
}
.about-image-overlay .stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem; font-weight: 300;
  color: var(--gold); line-height: 1;
}
.about-image-overlay .stat-label {
  font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-light); margin-top: 6px;
}

.about-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-style: italic; font-weight: 300;
  color: var(--color-primary-dark);
  border-left: 2px solid var(--gold);
  padding-left: 24px; margin: 30px 0; line-height: 1.5;
}

.timeline-item { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--gold-pale); }
.timeline-year {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; font-weight: 500; color: var(--gold);
  min-width: 50px; padding-top: 2px;
}

/* Values row */
.values-row { border-top: 1px solid var(--gold-light) !important; }
.values-row .sppb-icon .sppb-icon-container {
  width: 48px; height: 48px;
  margin: 0 auto 16px; border: 1px solid var(--gold-light);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.values-row .sppb-icon .sppb-icon-container > i {
  width: 48px !important; height: 48px !important; line-height: 48px !important;
}

/* Listino prezzi */
.price-table { width: 100%; border-collapse: collapse; }
.price-table td { padding: 16px 0; font-size: medium;
    font-weight: 600; }
.price-table td:last-child {
  text-align: right;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; font-weight: 500; color: var(--gold);
}
.price-table tr { border-bottom: 1px solid rgba(201,168,76,0.1); transition: background 0.2s; }
.price-table tr:hover { background: rgba(201,169,110,0.04); }

.sppb-panel-modern > .sppb-panel-heading {
  background: var(--beige) !important;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gold-light);
}
.sppb-panel-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem; font-weight: 400; color: var(--dark);
}
.sppb-panel-modern .sppb-panel-body { border-top-color: transparent; }

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

/* ===================================================================
   7. AREA CARDS
=================================================================== */
.aree { background: var(--beige); padding: var(--section-padding) 0; }

.area-card {
  position: relative; overflow: hidden; min-height: 540px;
  display: flex; flex-direction: column; justify-content: flex-end;
  cursor: pointer;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.area-card:hover { background-size: 125% auto !important; }

.area-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top, rgba(46,34,64,0.96) 0%, rgba(46,34,64,0.48) 50%, rgba(46,34,64,0.04) 100%);
  transition: background 0.5s;
}
.area-card:hover::after {
  background: linear-gradient(to top, rgba(46,34,64,0.98) 0%, rgba(46,34,64,0.72) 60%, rgba(46,34,64,0.2) 100%);
}

.area-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
}
.ac-est::before { background: var(--lav); }
.ac-ger::before { background: var(--gold); }
.ac-nut::before { background: var(--lav-light); }

.area-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.52) saturate(0.8);
  transition: transform 0.75s cubic-bezier(0.16,1,0.3,1), filter 0.5s;
}
.area-card:hover .area-bg { transform: scale(1.06); filter: brightness(0.36) saturate(0.65); }

.area-body {
  position: relative; z-index: 2;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  transform: translateY(8px);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.area-card:hover .area-body { transform: translateY(0); }

.area-tag {
  font-family: var(--font-b); font-size: var(--fs-eyebrow);
  font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 12px; display: block;
}
.ac-est .area-tag { color: var(--lav-light) !important; }
.ac-ger .area-tag { color: var(--oro-light) !important; }
.ac-nut .area-tag { color: #d4c0ee !important; }

.area-body h4 {
  font-family: var(--font-d); font-weight: 400; color: var(--white) !important;
  font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.2 !important; margin-bottom: 14px;
}

.area-card .area-body p {
  font-size: 0.92rem; line-height: 1.85; color: rgba(255,255,255,1);
  max-height: 0; overflow: hidden; opacity: 0 !important;
  transition: max-height 0.55s cubic-bezier(0.16,1,0.3,1), opacity 0.4s;
}
.area-card:hover .area-body p { max-height: 180px; opacity: 1 !important; }

.area-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-b); font-size: var(--fs-eyebrow);
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 16px;
}
.ac-est .area-arrow { color: var(--lav-light); }
.ac-ger .area-arrow { color: var(--oro-light); }
.ac-nut .area-arrow { color: #d4c0ee; }
.area-arrow::after { content: '→'; transition: transform 0.3s; }
.area-card:hover .area-arrow::after { transform: translateX(5px); }

/* ===================================================================
   8. SEZIONE — padding generico
=================================================================== */
.sezione        { padding-top: var(--section-padding) !important; padding-bottom: var(--section-padding) !important; }
.sezione-top    { padding-top: var(--section-padding) !important; }
.sezione-bottom { padding-bottom: var(--section-padding) !important; }

/* ===================================================================
   9. MARQUEE BAND
   MIGLIORAMENTO: pausa al hover + rispetto prefers-reduced-motion
=================================================================== */
.marquee-band {
  background: var(--color-primary-dark) !important;
  padding: 13px 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.marquee-track {
  display: inline-flex !important;
  animation: marquee 32s linear infinite !important;
}

/* ── NUOVO: pausa al mouse ── */
.marquee-band:hover .marquee-track {
  animation-play-state: paused !important;
}

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

.marquee-item {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-small) !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--color-white) !important;
  padding: 0 30px !important;
  flex-shrink: 0 !important;
}
.marquee-item::before {
  content: '◆ ' !important;
  color: var(--gold-light) !important;
  font-size: 0.38rem !important;
  vertical-align: middle !important;
}

/* Accessibilità: no-motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 4px 20px !important;
  }
}

/* ===================================================================
   10. BIO
=================================================================== */
#section-id-1771856613808 {
  background: var(--warm-white) !important;
  padding: var(--section-padding) 0 !important;
}

.bio-vis { position: relative; padding-top: 16px; padding-right: 20px; padding-bottom: 40px; }

.bio-accent { position: relative !important; }
.bio-accent::before {
  content: '' !important; position: absolute !important;
  top: -16px !important; right: -16px !important;
  width: 120px !important; height: 120px !important;
  border-top: 2px solid var(--gold) !important; border-right: 2px solid var(--gold) !important;
  z-index: 1 !important; pointer-events: none !important;
}
.bio-accent::after {
  content: '' !important; position: absolute !important;
  bottom: -16px !important; left: -16px !important;
  width: 80px !important; height: 80px !important;
  border-bottom: 1.5px solid var(--color-primary) !important;
  border-left: 1.5px solid var(--color-primary) !important;
  pointer-events: none !important;
}

/* ── MIGLIORAMENTO: immagine bio con transizione zoom ── */
.bio-visual-box {
  overflow: hidden !important;
  position: relative !important;
}
.bio-visual-box img {
  width: 100%; height: 560px;
  object-fit: cover; object-position: 50% 10%;
  display: block;
  filter: brightness(0.97) saturate(0.92);
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1), filter 0.5s !important;
}
.bio-visual-box:hover img {
  transform: scale(1.03);
  filter: brightness(1) saturate(1) !important;
}

.bio-acc-lav {
  position: absolute; bottom: -15px; left: -15px;
  width: 80px; height: 80px;
  border-bottom: 1.5px solid var(--lav); border-left: 1.5px solid var(--lav);
  pointer-events: none;
}
.bio-acc-oro {
  position: absolute; top: -15px; right: -15px;
  width: 120px; height: 120px;
  border-top: 2px solid var(--gold); border-right: 2px solid var(--gold);
  pointer-events: none;
}

.bio-quote {
  position: absolute; bottom: 0; right: -8px;
  background: var(--white); padding: 22px 28px; max-width: 300px;
  border-left: 3px solid var(--lav);
  font-family: var(--font-d); font-size: 1rem; font-style: italic;
  color: var(--dark); line-height: 1.55;
  box-shadow: 0 8px 32px rgba(155,132,192,0.18); z-index: 2;
}
.bio-quote cite {
  font-family: var(--font-b); font-size: var(--fs-eyebrow);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--oro-dark); font-style: normal; margin-top: 8px; display: block;
}

/* Credenziali */
.creds { background: var(--beige-dark); margin-top: 44px; }
.credential { background: var(--white); padding: 22px 18px; transition: background var(--t); }
.credential:hover { background: var(--color-bg) !important; }
.credential .sppb-addon-title {
  font-family: var(--font-primary) !important; font-size: var(--fs-eyebrow) !important;
  font-weight: 700 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important;
  color: var(--gold-dark) !important; margin-bottom: 5px !important;
}
.credential .sppb-text-block {
  font-family: var(--font-display) !important; font-size: 0.95rem !important;
  font-style: italic !important; color: var(--dark) !important;
}

/* ===================================================================
   11. TRATTAMENTI
=================================================================== */
.treatments {
 background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark), var(--dark));
  color: var(--cream);
  padding: var(--section-padding) clamp(1.5rem, 5vw, 5rem) !important;
}

.treatments .hero-eyebrow .sppb-addon-title { color: var(--color-primary-light) !important; }
.treatments .hero-eyebrow .sppb-addon-title::before { background: var(--color-primary) !important; }
.treatments h3.sppb-addon-title, .treatments .h2 .sppb-addon-title { color: var(--color-white) !important; }
.treatments h3.sppb-addon-title em, .treatments .h2 em { color: var(--color-primary) !important; }

/* ── MIGLIORAMENTO: card trattamento con hover più morbido ── */
.treatment-card {
  background: transparent !important;
  border: 1px solid var(--color-primary-light)!important;
  position: relative !important; overflow: hidden !important;
  transition: background 0.35s, transform 0.3s, box-shadow 0.3s !important;
}
.treatment-card:hover {
  background: var(--color-primary-dark)!important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35) !important;
}

.treatment-card .sppb-addon-blocknumber {
  padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.2rem, 2vw, 1.8rem);
}

.t-photo img {
  filter: saturate(0.72) brightness(0.92);
  transition: filter 0.4s; position: relative; z-index: 1;
}
.treatment-card:hover .t-photo img { filter: saturate(0.9) brightness(0.97); }
.treatment-card .pull-left { float: none !important; display: block !important; }
.treatment-card .sppb-addon-blocknumber .sppb-blocknumber-number {
  display: block !important; text-align: left;
}

.treatment-card h4 {
  display: none!important;
}

.treatment-card::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 3px !important; height: 0 !important;
  background: var(--color-primary-light) !important;
  transition: height 0.4s !important; z-index: 99;
}
.treatment-card:hover::before { height: 100% !important; }

.treatment-card .sppb-blocknumber-number {
  font-family: var(--font-display) !important;
  font-size: clamp(2.2rem, 3.5vw, 3.2rem) !important;
  font-weight: 300 !important; color: var(--color-primary) !important;
  line-height: 1 !important; margin-bottom: 12px !important;
  display: block !important; transition: color 0.4s !important;
}
.treatment-card:hover .sppb-blocknumber-number { color: var(--bg-beige-dark) !important; }

.treatment-card .sppb-media-heading {
  font-family: var(--font-display) !important;
  font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
  font-weight: 400 !important; color: var(--cream) !important;
  margin-bottom: 10px !important; line-height: 1.3 !important;
}

.treatment-card .sppb-blocknumber-text {
  font-size: var(--fs-body) !important;
  color: var(--color-primary-light) !important; line-height: 1.8 !important;
  font-weight: 300 !important; transition: color 0.4s !important;
}
.treatment-card:hover .sppb-blocknumber-text { color: var(--color-white) !important; opacity: .8; }

/* ── MIGLIORAMENTO: immagini trattamenti uniformi ── */
#column-wrap-id-1772203083427,
#column-wrap-id-1772203225172,
#column-wrap-id-1772203225189,
#column-wrap-id-1772203225198,#column-wrap-id-1773839572695, #column-wrap-id-1773839572704,#column-wrap-id-1773839572721,
#column-wrap-id-1773839572730,#column-wrap-id-1773839572745,#column-wrap-id-1773839572754,#column-wrap-id-1773839572769,
#column-wrap-id-1773839572782

{ position: relative; min-height: 550px; }

.treatment-image,
.treatment-image .sppb-column-addons,
.treatment-image .sppb-addon-wrapper,
.treatment-image .sppb-addon-wrapper > div,
.treatment-image .sppb-addon,
.treatment-image .sppb-addon-content,
.treatment-image .sppb-addon-single-image-container {
  position: absolute !important; inset: 0 !important;
  height: 100% !important; width: 100% !important;
  padding: 0 !important; margin: 0 !important;
      overflow: hidden!important;
}
.treatment-image .sppb-img-responsive {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1) !important;
}
.treatment-item:hover .treatment-image .sppb-img-responsive,
.treatment-item-2:hover .treatment-image .sppb-img-responsive {
  transform: scale(1.04) !important;
}

/* ===================================================================
   12. FILOSOFIA
=================================================================== */
.philosophy {
  background: var(--bg-beige) !important;
  text-align: center !important; position: relative !important; overflow: hidden !important;
}

/* Watermark */
.itemid-101 .philosophy::before {
  content: 'BENESSERE' !important;
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(4rem, 14vw, 14rem) !important;
  font-weight: 300 !important; color: var(--gold-light); opacity: 0.18;
  pointer-events: none !important; white-space: nowrap !important;
  z-index: 0 !important; letter-spacing: 0.06em !important;
}
.philosophy > .sppb-container-inner, .philosophy .sppb-row {
  position: relative !important; z-index: 1 !important;
}

.philosophy .hero-eyebrow,
.philosophy .hero-eyebrow .sppb-addon-title {
  justify-content: center !important; color: var(--gold-dark) !important;
}
.philosophy .hero-eyebrow .sppb-addon-title::before { display: none !important; }
.philosophy .hero-eyebrow .sppb-addon-title::after {
  content: '' !important; display: block !important;
  width: 28px !important; height: 1px !important; background: var(--gold) !important;
}

/* ── MIGLIORAMENTO: blockquote con bordo laterale oro e più respiro ── */
.philosophy blockquote {
  font-family: var(--font-display) !important;
  font-size: clamp(1.4rem, 2.8vw, 2.5rem) !important;
  font-weight: 300 !important; font-style: italic !important;
  line-height: 1.5 !important; color: var(--dark) !important;
  max-width: 820px !important; margin: 0 auto 32px !important;
  border: none !important;
  border-left: 3px solid var(--gold) !important;
  padding: 16px 0 16px 32px !important;
  background: transparent !important;
  text-align: left !important;
}

.philosophy cite {
  font-family: var(--font-primary) !important;
  font-size: 0.62rem !important; font-weight: 600 !important;
  letter-spacing: 0.2em !important; text-transform: uppercase !important;
  color: var(--gold-dark) !important; font-style: normal !important; display: block !important;
}

/* ===================================================================
   13. PERCORSO
=================================================================== */
.percorso-section .hero-eyebrow,
.percorso-section .hero-eyebrow .sppb-addon-title {
  justify-content: center !important; color: var(--color-primary) !important;
}
.percorso-section .h2 .sppb-addon-title { color: var(--dark) !important; text-align: center !important; }
.percorso-section .h2 em { color: var(--color-primary) !important; }

.steps-grid { position: relative !important; }
.steps-grid::before {
  content: '' !important; position: absolute !important;
  top: 40px !important; left: 12% !important; right: 12% !important; height: 1px !important;
  background: linear-gradient(to right, transparent, var(--color-primary-light), transparent) !important;
}

.step-item { text-align: center !important; padding: 0 clamp(1rem, 3vw, 3rem) !important; position: relative !important; z-index: 1 !important; }

.step-circle {
  width: 80px !important; height: 80px !important;
  border: 1.5px solid var(--color-primary) !important;
  background: var(--color-bg) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 24px !important;
  font-family: var(--font-display) !important; font-size: 1.5rem !important; font-weight: 300 !important;
  color: var(--color-primary) !important;
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base) !important;
}
/* ── MIGLIORAMENTO: cerchio step con leggero scale al hover ── */
.step-item:hover .step-circle {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  transform: scale(1.08) !important;
}

.step-item h4 {
  font-family: var(--font-primary) !important; font-size: var(--fs-eyebrow) !important;
  font-weight: 600 !important; letter-spacing: 0.12em !important;
  text-transform: uppercase !important; color: var(--dark) !important; margin-bottom: 10px !important;
}

/* ===================================================================
   14. CONTATTI
=================================================================== */
.contatti1 {
  background: var(--color-section) !important;
  padding: var(--section-padding) clamp(2rem, 5vw, 6rem) !important;
  position: relative !important; overflow: hidden !important;
}
.contatti1 .hero-eyebrow { margin-bottom: 0 !important; }

.contatti1::before {
  content: '' !important; position: absolute !important;
  bottom: -80px !important; right: -80px !important;
  width: 300px !important; height: 300px !important;
  border-radius: 50% !important; background: rgb(178 228 225 / 8%) !important; pointer-events: none !important;
}
.contatti1::after {
  content: '' !important; position: absolute !important;
  top: 40px !important; left: 40px !important;
  width: 60px !important; height: 60px !important;
  border-top: 1.5px solid rgba(226,201,138,0.4) !important;
  border-left: 1.5px solid rgba(226,201,138,0.4) !important;
  pointer-events: none !important;
}

.bfQuickMode label.form-label, .bfQuickMode .bfElemWrap label {
  font-size: var(--fs-eyebrow) !important;
}

.contatti1 .hero-eyebrow .sppb-addon-title { color: var(--color-primary-light) !important; }
.contatti1 .hero-eyebrow .sppb-addon-title::before { background: var(--color-primary-light) !important; }

.contatti1 .h2.crema .sppb-addon-title, .contatti1 h3 {
  color: var(--color-white) !important; margin-bottom: clamp(2rem, 4vw, 4rem) !important;
}
.contatti1 .h2.crema em, .contatti1 h3 em { color: var(--gold-light) !important; }

.c-label {
  font-family: var(--font-primary) !important; font-size: 0.54rem !important;
  font-weight: 700 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important;
  color: var(--color-primary-light) !important; opacity: 0.75 !important;
  margin-bottom: 6px !important; display: block !important;
}
.c-value {
  font-family: var(--font-display) !important; font-size: 1.15rem !important;
  color: var(--color-white) !important; display: block !important;
  margin-bottom: 28px !important; transition: color var(--transition-base) !important;
}
.c-value:hover { color: var(--gold-light) !important; }

#column-id-1771923771990 { padding: var(--section-padding) clamp(2rem, 5vw, 6rem) !important; }
#column-id-1771923771989 { background-color: var(--color-dark) !important; }

/* ── MIGLIORAMENTO: form input con line-height e focus state espliciti ── */
.sppb-ajaxt-contact-form .sppb-form-group input,
.sppb-ajaxt-contact-form .sppb-form-group textarea,
.sppb-ajaxt-contact-form .sppb-form-group select {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--bg-beige-dark) !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  color: var(--dark) !important;
  font-family: var(--font-primary) !important;
  font-size: 0.88rem !important; font-weight: 300 !important;
  outline: none !important; box-shadow: none !important;
  transition: border-color var(--transition-base) !important;
  width: 100% !important;
}
.sppb-ajaxt-contact-form .sppb-form-group input:focus,
.sppb-ajaxt-contact-form .sppb-form-group textarea:focus {
  border-bottom-color: var(--color-primary) !important;
  box-shadow: 0 2px 0 var(--color-primary) !important; /* doppia linea gold al focus */
}

.sppb-ajaxt-contact-form .sppb-form-group label {
  font-family: var(--font-primary) !important; font-size: 0.54rem !important;
  font-weight: 700 !important; letter-spacing: 0.18em !important;
  text-transform: uppercase !important; color: var(--color-primary-dark) !important;
}

.sppb-ajaxt-contact-form .sppb-btn-success {
  background: var(--color-primary) !important; color: var(--color-white) !important;
  border: none !important; border-radius: 0 !important;
  font-family: var(--font-primary) !important; font-size: 0.70rem !important;
  font-weight: 600 !important; letter-spacing: 0.16em !important;
  text-transform: uppercase !important; padding: 13px 36px !important;
  transition: background var(--transition-base), transform 0.2s !important;
  cursor: pointer !important;
}
.sppb-ajaxt-contact-form .sppb-btn-success:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-2px) !important;
}

/* ===================================================================
   15. CTA BLOCK + FOOTER
=================================================================== */
.cta-block { background: var(--color-primary) !important; color: var(--white) !important; }
.cta-block h3 { color: var(--white) !important; }

#sp-bottom {
  padding: clamp(3rem, 5vw, 6rem) clamp(1rem, 4vw, 2.5rem) !important;
  background: var(--color-dark) !important;
  color: var(--color-primary-light) !important;
  border-top: 1px solid rgba(201, 169, 110, 0.2) !important;
}

p.ft-desc { color: var(--color-primary-light) !important; line-height: 1.8; max-width: 380px; }

#sp-bottom a       { color: var(--color-primary-light) !important; text-transform: uppercase !important; font-weight: 400; }
#sp-bottom a:hover { color: var(--color-primary) !important; }

#sp-bottom .sp-module-title, #sp-bottom h3, #sp-bottom h4, #sp-bottom h5 {
  font-family: var(--font-primary) !important; font-size: 0.54rem !important;
  font-weight: 700 !important; letter-spacing: 0.2em !important;
  text-transform: uppercase !important; color: var(--color-white) !important;
  margin-bottom: 20px !important;
}
#sp-bottom .sp-logo a { font-family: var(--font-display) !important; font-size: 1.2rem !important; font-weight: 300 !important; color: var(--dark) !important; }
#sp-bottom .sp-logo em { color: var(--color-primary) !important; }
#sp-bottom p { font-size: 0.78rem !important; }

#sp-footer {
  color: var(--color-primary-light) !important;
  font-family: var(--font-primary) !important; font-size: 0.68rem !important;
  letter-spacing: 0.08em !important; text-align: center !important;
  background: var(--color-dark) !important;
}
#sp-footer a       { color: var(--color-primary-light) !important; }
#sp-footer a:hover { color: var(--color-primary-light) !important; }

/* ===================================================================
   16. SCROLL TOP
=================================================================== */
.sp-scroll-up { background: var(--color-primary) !important; color: var(--color-white) !important; border-radius: 0 !important; }
.sp-scroll-up:hover { background: var(--color-primary-dark) !important; }

/* ===================================================================
   17. REVEAL ON SCROLL
=================================================================== */
.reveal {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  transition: opacity 0.7s ease, transform 0.7s ease !important;
}
.reveal.visible { opacity: 1 !important; transform: translateY(0) !important; }

/* ===================================================================
   18. UTILITIES
=================================================================== */
.crema, .crema .sppb-addon-title { color: var(--color-white) !important; }
.crema em { color: var(--gold-light) !important; }

[style*="var(--cream)"],
.sppb-col[style*="background: var(--cream)"] { background: var(--cream) !important; }

.sppb-addon-divider .sppb-divider { border-color: var(--gold) !important; }
.sppb-divider[style*="var(--gold)"] { border-color: var(--gold) !important; }

/* ===================================================================
   19. RESPONSIVE
=================================================================== */
@media (max-width: 1365px) {
  #sp-header { height: 72px !important; }
  .bio-visual-box img { height: 400px !important; }
  .contatti { display: block !important; }
  .contatti1 { padding: 3rem clamp(1.5rem, 4vw, 3rem) !important; }
  #column-id-1771923771990 { padding: 3rem clamp(1.5rem, 4vw, 3rem) !important; }
  .steps-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 3rem !important; }
  .steps-grid::before { display: none !important; }
}

@media (max-width: 767px) {
  
  
  .article-details .article-full-image {
     margin-bottom: 2rem; 
}


  /* ── MIGLIORAMENTO: immagini trattamenti uniformi ── */
#column-wrap-id-1772203083427,
#column-wrap-id-1772203225172,
#column-wrap-id-1772203225189,
#column-wrap-id-1772203225198,#column-wrap-id-1773839572695, #column-wrap-id-1773839572704,#column-wrap-id-1773839572721,
#column-wrap-id-1773839572730,#column-wrap-id-1773839572745,#column-wrap-id-1773839572754,#column-wrap-id-1773839572769,
#column-wrap-id-1773839572782

{ position: relative; min-height: 370px; }


  #column-wrap-id-1771856613636 {
    position: absolute; bottom: 52px; z-index: 99;
    background-color: rgba(255,255,255,0.8); width: 100%;
  }

  .hero-h1 {
    margin-top: 16px; font-weight: 300;
    text-align: center; font-size: var(--fs-h3) !important;
    font-family: var(--font-d); line-height: normal;
  }

  .hero-badge { bottom: 100px; }

  #hero-viola .sppb-carousel-inner > .sppb-item > a > img,
  #hero-viola .sppb-carousel-inner > .sppb-item > img,
  #hero-viola .sppb-img-responsive {
    width: 100% !important;
    height: 85vh !important;
    object-fit: cover;
    object-position: center;
  }

  /* 1. Forza la riga a non andare a capo e a distribuire lo spazio agli estremi */
   #sp-header .row.align-items-center {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
    }

    /* 2. Il logo prende lo spazio necessario ma non oltre l'80% */
    #sp-logo {
        flex: 0 1 auto !important;
        max-width: 80% !important;
        padding-right: 10px !important;
    }

    /* 3. Il menu (burger) si blocca a destra e non va al centro */
    #sp-menu {
        flex: 0 0 auto !important;
        margin-left: auto !important; /* Sposta il menu tutto a destra */
        width: auto !important;
    }

    /* 4. Font size leggibile: non scendere sotto 1rem */
    .logo a, .logo span, #sp-logo a {
        font-size: 1.1rem !important; 
        white-space: nowrap !important;
        display: block !important;
    }

  #column-wrap-id-1772203083427,
  #column-wrap-id-1772203225172,
  #column-wrap-id-1772203225189,
  #column-wrap-id-1772203225198 { min-height: 380px; }

  .bio-visual-box img { height: 320px !important; }
  .bio-quote { position: static !important; margin-top: 20px !important; max-width: 100% !important; }
  .step-circle { width: 64px !important; height: 64px !important; }
  .steps-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }

  .contatti1, #column-id-1771923771990 { padding: 2.5rem 1rem !important; }

  .sezione {
    padding-top: clamp(2.5rem, 8vw, 4.5rem) !important;
    padding-bottom: clamp(2.5rem, 8vw, 4.5rem) !important;
  }
  .area-card { min-height: 340px; }
  .sppb-btn { width: 100%; text-align: center; }
  .contatti1::after { display: none !important; }

  /* Filosofia: blockquote su mobile torna centrato */
  .philosophy blockquote {
    border-left: none !important;
    padding: 0 16px !important;
    text-align: center !important;
  }
}


/* 5. Se il testo "Dott.ssa Tania Shemet" è ancora troppo lungo per schermi piccoli (es. iPhone SE) */
    @media (max-width: 380px) {
        .logo a {
            font-size: 0.9rem !important;
        }
    }
    
    
@media (max-width: 480px) {
  #sp-top-bar { display: none !important; }
  .hero-badge { display: none !important; }
}