@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=Source+Sans+3:wght@300;400;500;600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.46.0/tabler-icons.min.css');

/* ══ PALETTE — Sage & Natural Green ═════════════════════════
   #fffcef  crema       → sfondo principale
   #DDE4D0  verde chiaro→ sezioni alternate
   #B5C49A  salvia      → hero destra, approccio, bordi, dots
   #7A9050  verde nat.  → CTA, footer, dark bg, logo, bottoni
   #A8B46A  verde hover → stati attivi
   #3A3835  testo scuro → corpo e titoli
   #5E5C58  testo medio → nav, didascalie
   #8A8B8C  testo light → label, credenziali
   #D97A88  rosa        → h2 em su sfondo chiaro
   #DC8780  pesca       → bottoni prenotazione, stelle, link
   #F5D0BF  pesca chiaro→ em titoli su sfondo verde scuro
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg-main:      #fffcef;
  --bg-alt:       #DDE4D0;
  --bg-sage:      #B5C49A;
  --bg-green:     #7A9050;
  --green-hover:  #A8B46A;
  --border:       #B5C49A;
  --text-dark:    #3A3835;
  --text-mid:     #5E5C58;
  --text-light:   #8A8B8C;
  --accent-green: #7A9050;
  --accent-rose:  #D97A88;
  --accent-peach: #DC8780;
  --accent-peach-lt: #F5D0BF;

  /* Alias per compatibilità style.css — sono le variabili che l'editor del tema
     modifica davvero (vedi VAR_MAP in theme-editor.html): le regole qui sotto
     devono richiamare QUESTE, non le loro "gemelle" sopra, altrimenti l'editor
     continua a non avere alcun effetto visibile sul sito. */
  --cream:        #fffcef;
  --sand:         #DDE4D0;
  --sand-mid:     #B5C49A;
  --white:        #FFFFFF;
  --navy:         #7A9050;
  --navy-lt:      #A8B46A;
  --terra:        #7A9050;
  --terra-lt:     #B5C49A;
  --teal:         #B5C49A;
  --teal-lt:      #C8D4B4;
  --charcoal:     #3A3835;
  --mid:          #5E5C58;
  --light:        #8A8B8C;
  --serif:        'Fraunces', Georgia, serif;
  --sans:         'Source Sans 3', system-ui, sans-serif;
  --size-base:    17px;
}

/* ── BASE ─────────────────────────────────────────────────── */
html, body { background: var(--cream) !important; }
body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: var(--size-base);
  line-height: 1.65;
  color: var(--charcoal);
}

/* ── TIPOGRAFIA ───────────────────────────────────────────── */
h1,h2,h3,h4,.h2,.hero-h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  color: var(--charcoal);
  letter-spacing: -.01em;
  line-height: 1.15;
}
.hero-h1 {
  font-size: clamp(2rem, 2.8vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--charcoal);
}
.h2 {
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 400;
  letter-spacing: -.01em;
}
.h2 em      { font-style:italic; color:var(--accent-rose) !important; }
.hero-h1 em { font-style:italic; color:var(--terra); }
.lead,.hero-p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--mid);
  font-weight: 300;
}
.eyebrow {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--terra);
}

/* ── NAVBAR ───────────────────────────────────────────────── */
nav {
  background: rgba(255,252,239,0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 12px rgba(58,56,53,.08) !important;
}
.nav-name { font-family:'Fraunces',serif; color:var(--charcoal) !important; }
.nav-role { color:var(--light) !important; }
.nav-links>li>a { color:var(--mid) !important; font-size:14px; letter-spacing:.04em; }
.nav-links>li>a:hover,
.nav-links>li>a.active { color:var(--terra) !important; }
.nav-links>li>a::after { background:var(--terra) !important; }
.nav-links>li>a.nav-cta,
.nav-links>li>a.nav-cta:hover,
.nav-links>li>a.nav-cta:focus { color:var(--white) !important; }
.nav-drop { background:var(--cream) !important; border-color:var(--teal) !important; }
.nav-drop a:hover { background:var(--sand) !important; color:var(--terra) !important; }
.nav-cta {
  background:var(--accent-peach) !important;
  color:var(--white) !important;
  font-size:14px !important;
  font-weight:500 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  padding:.55rem 1.4rem !important;
}
.nav-cta:hover { background:var(--accent-rose) !important; color:var(--white) !important; }
.nav-cta::after { display:none !important; }

/* ── HERO ─────────────────────────────────────────────────── */
.hero-outer { background:var(--cream) !important; }
/* padding-top scala con l'altezza della finestra (vedi css/style.css) invece di
   un valore fisso — dimensione massima già raggiunta a ~950px di altezza utile,
   non serve una finestra a piena risoluzione: quasi nessun browser reale offre
   più di questo (barra indirizzi/schede tolgono spazio anche a schermo intero). */
.hero-outer--new { background:var(--cream) !important; padding-top:clamp(16px, calc(20vh - 134px), 56px) !important; padding-bottom:0 !important; margin-bottom:6rem !important; }
.hero-eyebrow { color:var(--terra) !important; }
.hero-eyebrow::before { background:var(--terra) !important; }
.hero-credenziale { color:var(--light) !important; font-size:.75rem; letter-spacing:.06em; margin-bottom:1rem; }
.hero-cta-note { color:var(--light) !important; font-size:.8rem; margin-top:.6rem; font-weight:300; }
.hero-new .hero-trust { gap:26px !important; padding-top:0 !important; border-top:none !important; margin-top:0 !important; }

/* ── BOTTONI ──────────────────────────────────────────────── */
.btn { font-family:'Source Sans 3',system-ui,sans-serif; }
.btn-navy,.btn-primary { background:var(--terra) !important; color:var(--white) !important; font-size:15px; font-weight:500; letter-spacing:.02em; }
.btn-navy:hover { background:var(--green-hover) !important; }
.btn-outline { border-color:var(--terra) !important; color:var(--terra) !important; font-size:15px; font-weight:500; }
.btn-outline:hover { background:rgba(122,144,80,.08) !important; }
.btn-cream { background:var(--cream) !important; color:var(--terra) !important; font-size:15px; font-weight:500; }
.btn-cream:hover { background:var(--sand) !important; }
.btn-booking,.btn-peach,
[class*="btn"][href*="prenota"],[class*="btn"][href*="contatti"] {
  background:var(--accent-peach) !important;
  color:var(--white) !important;
  font-weight:500 !important;
}
.btn-booking:hover,.btn-peach:hover { background:var(--accent-rose) !important; color:var(--white) !important; }

/* ── SEZIONI ──────────────────────────────────────────────── */
#intro    { background:var(--sand) !important; }
#servizi  { background:var(--cream) !important; }
#approccio{ background:var(--teal) !important; }
#come     { background:var(--cream) !important; }
#come-lav { background:var(--sand) !important; }
#lav-insieme { background:var(--sand) !important; }
#testi    { background:var(--cream) !important; }
#faq      { background:var(--sand); }
#perche   { background:var(--terra) !important; position:relative; overflow:hidden; }

/* ── BLOB su sfondi verdi #7A9050 ────────────────────────── */
.cta-banner,
#perche,
.page-hero {
  position: relative !important;
  overflow: hidden !important;
}
.cta-banner::before, .cta-banner::after,
#perche::before, #perche::after,
.page-hero::before, .page-hero::after {
  content: '' !important;
  position: absolute !important;
  border-radius: 60% 40% 55% 45% / 45% 55% 40% 60% !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.cta-banner::before,
#perche::before,
.page-hero::before {
  width: 380px !important; height: 380px !important;
  background: rgba(245,208,191,0.18) !important;
  top: -100px !important; left: -80px !important;
}
.cta-banner::after,
#perche::after,
.page-hero::after {
  width: 260px !important; height: 260px !important;
  background: rgba(181,196,154,0.20) !important;
  bottom: -80px !important; right: -60px !important;
  border-radius: 50% !important;
}
/* Contenuto sopra i blob */
.cta-banner > *,
#perche > *,
.page-hero > * { position: relative !important; z-index: 1 !important; }

/* ── APPROCCIO (sfondo salvia) ────────────────────────────── */
#approccio .h2        { color:var(--charcoal) !important; }
#approccio .h2 em     { color:var(--accent-rose) !important; }
#approccio .lead      { color:var(--mid) !important; }
#approccio .eyebrow   { color:var(--terra) !important; }

/* ── CARDS ────────────────────────────────────────────────── */
.svc-card { background:var(--white) !important; border:none !important; box-shadow:0 4px 20px rgba(58,56,53,.08) !important; }
.svc-card:hover { box-shadow:0 8px 32px rgba(58,56,53,.13) !important; }
.svc-card::before { background:var(--teal) !important; }
.svc-name { color:var(--charcoal) !important; font-family:'Fraunces',serif; }
.svc-sub { color:var(--terra) !important; }
.svc-desc { color:var(--mid) !important; }
.svc-list li::before { color:var(--terra) !important; }
.svc-link { color:var(--accent-peach) !important; }
.svc-link:hover { border-color:transparent !important; }
.come-visual { background:transparent !important; border:none !important; box-shadow:none !important; }
.testi-card { background:var(--white) !important; border:none !important; box-shadow:0 4px 20px rgba(58,56,53,.08) !important; }
.testi-card:hover { box-shadow:0 8px 32px rgba(58,56,53,.13) !important; }
.testi-stars { color:var(--accent-peach) !important; }
.testi-text { color:var(--charcoal) !important; font-family:'Fraunces',serif; }
.perche-card { background:rgba(255,255,255,.07) !important; border-color:rgba(181,196,154,.25) !important; }
.perche-title { color:var(--white) !important; font-family:'Fraunces',serif; }
.perche-desc { color:rgba(243,240,228,.6) !important; }

/* ── FOTO VISO ────────────────────────────────────────────── */
.intro-viso-wrap { border-color:var(--teal) !important; }

/* ── STEPS ────────────────────────────────────────────────── */
.step-num { background:var(--terra) !important; color:var(--white) !important; font-family:'Fraunces',serif; }
.step-item:not(:last-child)::after { background:var(--teal) !important; }
.step-title { color:var(--charcoal) !important; font-family:'Fraunces',serif; }
.step-desc { color:var(--mid) !important; }

/* ── CTA BANNER ───────────────────────────────────────────── */
.cta-banner { background:var(--terra) !important; }
.cta-banner .h2 { color:var(--cream) !important; }
.cta-banner .h2 em { color:var(--accent-peach-lt) !important; }
.cta-banner .lead { color:rgba(243,240,228,.82) !important; }
.cta-note { color:rgba(243,240,228,.55) !important; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-item { border-bottom-color:var(--teal) !important; }
.faq-q { color:var(--charcoal) !important; font-weight:500; }
.faq-q .ico { color:var(--terra) !important; }
.faq-a { color:var(--mid) !important; }

/* ── FOOTER ───────────────────────────────────────────────── */
footer { background:#374428 !important; }
.footer-logo-name { color:var(--cream) !important; font-family:'Fraunces',serif; }
.footer-logo-role { color:rgba(243,240,228,.4) !important; }
.footer-about { color:rgba(243,240,228,.6) !important; }
.footer-col-title { color:rgba(243,240,228,.35) !important; }
.footer-col a { color:rgba(243,240,228,.55) !important; }
.footer-col a:hover { color:var(--teal) !important; }
.footer-bottom { border-top-color:rgba(255,255,255,.12) !important; }
.footer-bottom p { color:rgba(243,240,228,.28) !important; }

/* ── PAGE HERO ────────────────────────────────────────────── */
.page-hero { background:var(--terra) !important; }
.page-hero .eyebrow { color:var(--teal) !important; }
.page-hero h1 { color:var(--cream) !important; font-family:'Fraunces',serif; }
.page-hero h1 em { color:var(--accent-peach-lt) !important; }
.page-hero p { color:rgba(243,240,228,.65) !important; }
.breadcrumb { background:var(--cream) !important; color:var(--light) !important; }
.breadcrumb a { color:var(--terra) !important; }

/* ── PERCHÉ (dark green) ──────────────────────────────────── */
#perche .h2 { color:var(--cream) !important; }
#perche .h2 em { color:var(--accent-peach-lt) !important; }
#perche .lead { color:rgba(243,240,228,.65) !important; }
#perche .eyebrow { color:var(--teal) !important; }

/* ── TOPBAR ───────────────────────────────────────────────── */
.topbar { display:none !important; }