/* =======================================================
   ROOT VARIABLES
======================================================= */
:root {
  --fz-blue: #466d86;
  --fz-blue-dark: #283449;
  --fz-orange: #fb8500;
  --fz-green: #81b29a;
  --fz-light: #f6f6f6;
  --fz-wa: #25D366;

  --fz-radius-xl: 26px;
  --fz-radius-md: 18px;

  --fz-font: "Plus Jakarta Sans", system-ui, sans-serif;
  --fz-font-hand: "Caveat", system-ui, sans-serif;

  --fz-ease: cubic-bezier(.25,.46,.45,.94);
  --fz-ease2: cubic-bezier(.23,1,.32,1);
}

/* =======================================================
   RESET / BASE
======================================================= */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  overflow-x: hidden; /* 👈 aggiungi questa riga */
}

body {
  font-family: var(--fz-font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--fz-blue-dark);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

section {
  padding: 80px 0;
}

.section-title {
  font-size: 2.35rem;
  font-weight: 700;
  color: var(--fz-blue-dark);
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0 0 14px;
  display: block;
  text-aligh:left;
}

.section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--fz-green);
  border-radius: 10px;
  margin-top: 6px;
}

.section-label-wrap {
  position: relative;
  display: block;
  margin-bottom: 26px;
}

.section-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fz-blue);
  text-transform: uppercase;
  letter-spacing: .10em;
  opacity: .9;
}

.section-label-accent {
  top: -18px;
  left: 0;
  font-family: var(--fz-font-hand);
  font-size: 1.2rem;
  color: var(--fz-green);
  opacity: .85;
}

/* Override etichette solo dentro la CTA */
.cta-band .section-label-accent {
  color: var(--fz-orange); /* Parla con noi in arancione */
  opacity: 1;
}

.cta-band .section-label {
  color: #ffffff;          /* PRENOTA in bianco */
  opacity: 0.95;
}

.section-lead {
  max-width: 640px;
  font-size: 1.02rem;
  opacity: 0.9;
}

/* =======================================================
   HEADER
======================================================= */
header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(16px);
  background:
    radial-gradient(circle at top left, rgba(129,178,154,0.08), transparent),
    rgba(255,255,255,0.95);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  transition:
    transform .18s var(--fz-ease2),
    filter .18s var(--fz-ease2);
}

.logo:hover {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.03);
}


.logo-img {
  height: 50px;
}

.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fz-blue);
  line-height: 1.1;
  margin-bottom: 0;
}

.logo-subtitle-hand {
  margin-top: 0;
  font-family: var(--fz-font-hand);
  font-size: 1rem;
  font-weight: 700;
  color: var(--fz-green);
  line-height: 1.1;
}

/* Mobile nav toggle (hamburger) */
.nav-toggle {
  display: none;
  border: 1px solid rgba(40,52,73,0.18);
  background: #ffffff;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
}

.nav-toggle-bar {
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: rgba(40,52,73,0.85);
}

.nav-toggle {
  position: relative;
  display: none;
  border: 1px solid rgba(40,52,73,0.18);
  background: #ffffff;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  transition: background .18s var(--fz-ease2), border-color .18s var(--fz-ease2);
}

.nav-toggle-bar {
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: rgba(40,52,73,0.85);
  transition: transform .18s var(--fz-ease2), opacity .18s var(--fz-ease2);
}

/* Stato menu aperto: trasformo in X */
header.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

header.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

header.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
}


/* Nav principale in header (non tocca il quick-nav laterale) */
header nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 0.82rem;
}

header nav a {
  padding: 4px 10px;
  border-radius: 999px;
  transition: .2s var(--fz-ease);
  opacity: 0.9;
  white-space: nowrap;
}

header nav a {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  transition: .2s var(--fz-ease);
  opacity: 0.9;
  white-space: nowrap;
  line-height: 1.1;
}


header nav a:not(.nav-cta):not(.nav-wa):hover {
  background: var(--fz-blue);
  color: #ffffff;
  opacity: 1;
}

/* Gruppo link principali (Servizi, Team, Recensioni, Contatti) */
.nav-primary-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Contenitore menu Sezioni */
.nav-sections {
  position: relative;
}

.nav-sections-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--fz-blue-dark);
  opacity: 0.9;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s var(--fz-ease);
  white-space: nowrap;
}

.nav-sections-toggle:hover {
  background: var(--fz-blue);
  color: #ffffff;
  opacity: 1;
}




/* Dropdown con tutte le sezioni – DESKTOP */
.nav-sections-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: 8px 8px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(129,178,154,0.10), transparent 60%),
    rgba(255,255,255,0.98);
  box-shadow: 0 14px 38px rgba(15,23,42,0.22);
  display: flex;
  flex-direction: column;
  gap: 2px;

  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity .18s var(--fz-ease2),
    transform .18s var(--fz-ease2);
}

/* Link dentro il dropdown */
.nav-sections-menu a {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Apertura dropdown su hover (desktop) */
.nav-sections:hover .nav-sections-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-cta {
  background: var(--fz-blue);
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 5px 14px rgba(0,0,0,0.2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-cta:hover {
  background: var(--fz-blue-dark);
}

.nav-cta-icon {
  font-size: 1rem;
}

.nav-wa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--fz-wa);
  color: white;
  font-weight: 600;
  box-shadow: 0 5px 14px rgba(0,0,0,0.2);
}

.nav-wa-label {
  font-size: 0.9rem;
}

.nav-wa-icon {
  font-size: 1.05rem;
}

.nav-wa:hover {
  background: #1ebe5b;
}

/* =======================================================
   HERO BACKGROUND
======================================================= */
.hero-wrap {
  padding: 0;
  background: linear-gradient(
    130deg,
    #1e2833 0%,
    #2c3b4c 30%,
    #466d86 100%
  );
  position: relative;
}

.hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 90px 20px 80px;
  display: flex;
  align-items: center;
  gap: 45px;
  position: relative;
  min-height: 620px;
}

/* =======================================================
   HERO LEFT (TESTO)
======================================================= */
.hero-left {
  flex: 1.2;
  z-index: 3;
  color: #fff;
  position: relative;
}

.hero-left::before {
  content: "";
  position: absolute;
  left: -60px;
  top: -40px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  filter: blur(70px);
  z-index: -1;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  font-size: .76rem;
  opacity: .9;
  margin-bottom: 12px;
}

.hero-highlight {
  font-family: var(--fz-font-hand);
  font-size: 1.4rem;
  color: var(--fz-orange);
}

.hero-title {
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
}

.hero-title-accent {
  display: block;
  margin-top: 0.25em;
  font-family: var(--fz-font-hand);
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 2px 6px rgba(0,0,0,0.22);
}

.hero-lead {
  max-width: 520px;
  font-size: 1.05rem;
  opacity: 0.95;
  margin-bottom: 24px;
  text-align: justify;
  text-justify: inter-word;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Variante per centrare i bottoni, usata nella CTA */
.hero-actions--center {
  justify-content: center;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 11px 22px;
  border-radius: 999px;

  /* WhatsApp ufficiale */
  background: #25D366;
  color: #ffffff;

  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  transition: .25s var(--fz-ease2);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  background: #1fb358; /* leggermente più scuro in hover */
}


/*
.btn-primary {
  padding: 11px 22px;
  border-radius: 999px;
  background: white;
  color: var(--fz-blue-dark);
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  transition: .25s var(--fz-ease2);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
}
*/

.btn-soft {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.5);
  color: white;
  font-size: .9rem;
  transition: .25s var(--fz-ease2);
}

.btn-soft:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

.hero-note {
  font-size: .82rem;
  opacity: .85;
  margin-top: 14px;
}

/* HERO TEXT ANIMATION */
.hero-animated > * {
  opacity: 0;
  transform: translateY(18px);
  animation: heroFadeUp .8s var(--fz-ease2) forwards;
}

.hero-animated > *:nth-child(1) { animation-delay: .05s; }
.hero-animated > *:nth-child(2) { animation-delay: .15s; }
.hero-animated > *:nth-child(3) { animation-delay: .25s; }
.hero-animated > *:nth-child(4) { animation-delay: .35s; }
.hero-animated > *:nth-child(5) { animation-delay: .45s; }
.hero-animated > *:nth-child(6) { animation-delay: .55s; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =======================================================
   HERO CAROUSEL
======================================================= */
.hero-carousel {
  flex: 1.1;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  margin-top: 20px;
  box-shadow:
    -40px 0 80px rgba(0,0,0,0.25),
    0 25px 70px rgba(0,0,0,0.30);
}

.hero-vignette {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px; /* prima 160px */
  height: 100%;
  background: linear-gradient(90deg, rgba(28,39,52,0.35), transparent); /* meno scura */
  pointer-events: none;
  z-index: 5;
}


.hero-carousel-glow {
  content: "";
  position: absolute;
  left: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 80%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 2;
}

.hero-slides {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 380px;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s var(--fz-ease2);
}

.hero-slide.is-active {
  opacity: 1;
  z-index: 2;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-caption {
  position: absolute;
  bottom: 14px;
  left: 14px;

  /* Ultra-soft background */
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);

  /* Mini pill size */
  padding: 4px 10px;
  border-radius: 10px;

  /* Typography soft */
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1px;

  /* Minimal shadow */
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);

  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 15;

  transition: opacity .2s ease, transform .2s ease;
}




.hero-caption span {
  font-size: 0.9rem;
  color: var(--fz-light);
}

.hero-slide.is-active .hero-caption {
  opacity: 1;
  transform: translateY(0);
}

/* CAROUSEL NAVIGATION */
.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  font-size: 2.0rem;
  color: #ffffff;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: .2s;
}

.hero-nav.prev { left: 10px; }
.hero-nav.next { right: 10px; }

.hero-nav:hover {
  background: var(--fz-orange);
  border-color: var(--fz-orange);
  color: #ffffff;
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}


.hero-dots {
  position: absolute;
  bottom: 14px;
  right: 18px;
  z-index: 15;
  display: flex;
  gap: 7px;
}

.hero-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.35);
  cursor: pointer;
  transition: .22s var(--fz-ease2);
}

.hero-dots .dot.is-active {
  background: var(--fz-orange);
  border-color: var(--fz-orange);
  transform: scale(1.25);
}

.hero-dots .dot:hover {
  background: rgba(251,133,0,0.7);
}

.hero-toggle {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 20;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.32);
  color: #ffffff;
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: .22s var(--fz-ease2);
}

.hero-toggle:hover {
  background: var(--fz-orange);
  border-color: var(--fz-orange);
}

/* =======================================================
   SEZIONI SOTTO
======================================================= */
#studio,
#filosofia,
#contatti {
  background: #fff;
}

#servizi,
.section-contrast-2 {
  background: #f4f7fb;
}

.section-contrast {
  background: var(--fz-light);
}

.leadMod {
  font-size: 1.22rem;
  line-height: 1.55;
  font-weight: 500;
  margin-bottom: 20px;
  color: var(--fz-blue-dark);
}

.section-text {
  font-size: 1.02rem;
  line-height: 1.6;
  opacity: .85;
  margin-bottom: 16px;
  text-align: justify;
  text-justify: inter-word;
}

/* =======================================================
   STUDIO + GALLERY
======================================================= */
.studio-grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1.3fr);
  gap: 48px;
  align-items: center;
}

.studio-points {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.studio-points li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 1.02rem;
  opacity: .88;
}

.studio-points li::before {
  content: "✔";
  color: var(--fz-green);
  font-weight: 600;
  margin-top: 2px;
  font-size: .9rem;
}

.studio-hand,
.services-hand,
.faq-hand {
  margin-top: 18px;
  font-family: var(--fz-font-hand);
  font-size: 1.4rem;
  color: var(--fz-orange);
  text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.studio-photos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.studio-top {
  display: flex;
  gap: 14px;
  height: min(380px, 40vw);
}

.studio-photo-big {
  flex: 3;
}

.studio-right {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.studio-right .studio-photo {
  flex: 1;
}

.studio-bottom {
  display: flex;
  gap: 14px;
}

.studio-thumb {
  flex: 1;
  height: min(150px, 18vw);
}

.studio-photo,
.studio-thumb {
  border-radius: var(--fz-radius-xl);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(0);
  transition: transform .25s var(--fz-ease2), box-shadow .25s var(--fz-ease2);
}

.studio-photo img,
.studio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-photo:hover,
.studio-thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 55px rgba(0,0,0,0.18);
}

/* LIGHTBOX GALLERIA STUDIO */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 80;
}

.lightbox.is-open {
  display: flex;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);  /* un filo più scuro, come le altre modali */
  backdrop-filter: blur(4px);
  z-index: 0;
}


.lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: 0 25px 60px rgba(0,0,0,0.55);
  border-radius: 18px;
  z-index: 1; /* importantissimo perché stia sopra alla backdrop */
}


.lightbox-img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 18px;

  /* bordo super-soft, quasi invisibile */
  border: 1px solid rgba(255,255,255,0.05);
}


.lightbox-close {
  position: absolute;
  top: 6px;
  right: 10px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
}

/* ANIMAZIONI REVEAL */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--fz-ease2), transform .7s var(--fz-ease2);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: .12s;
}

/* RESPONSIVE STUDIO */
@media (max-width: 900px) {
  .studio-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .studio-top {
    flex-direction: column;
    height: auto;
  }

  .studio-photo-big,
  .studio-right {
    flex: none;
    height: auto;
  }

  .studio-right .studio-photo {
    height: 220px;
  }
}

/* =======================================================
   SERVIZI
======================================================= */
.services-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 24px;          /* prima 22px → più aria tra le card */
  margin-top: 24px;   /* prima 20px → migliore distacco dal testo */
}

.service-item {
  background: #ffffff;
  padding: 20px 20px 20px 16px;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(70,109,134,0.12),
              0 4px 18px rgba(0,0,0,0.06);
}



.service-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}


.service-label {
  color: var(--fz-orange);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
  font-weight: 600;
}

.service-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 3px 0 4px;
}

.service-text {
  font-size: .9rem;
  line-height: 1.55;
  opacity: .9;
  
}

.service-media {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7f9fc, #eef3f8);
  border: 2px solid rgba(70,109,134,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  margin-left: -4px;
  box-shadow:
    0 4px 10px rgba(70,109,134,0.18),
    inset 0 1px 1px rgba(255,255,255,0.9);
  transition: transform .22s var(--fz-ease2),
              box-shadow .22s var(--fz-ease2),
              border-color .22s var(--fz-ease2);
}

.service-media-img img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  display: block;
}

.service-item:hover .service-media {
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(70,109,134,0.26),
    inset 0 1px 2px rgba(255,255,255,0.9);
  border-color: rgba(70,109,134,0.7);
}

.service-emoji {
  font-size: 42px;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.18));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.services-cta {
  margin-top: 18px;
}

.services-cta .btn-soft {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(70,109,134,0.20);
  color: var(--fz-blue-dark);
  font-size: .95rem;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  transition: all .2s var(--fz-ease2);
}

.services-cta .btn-soft:hover {
  transform: translateY(-2px);
  background: var(--fz-blue);
  color: #ffffff;
}

/* =======================================================
   FILOSOFIA
======================================================= */
.philosophy-grid-img {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1.05fr);
  gap: 48px;
  align-items: center;
}

.philosophy-hand {
  margin-top: 22px;
  font-family: var(--fz-font-hand);
  font-size: 1.45rem;
  color: var(--fz-orange);
  text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.philosophy-media {
  position: relative;
}

.philosophy-media-inner {
  position: relative;
  border-radius: var(--fz-radius-xl);
  overflow: hidden;
  box-shadow: 0 22px 55px rgba(0,0,0,0.25);
  transform: translateY(0);
  transition: transform .25s var(--fz-ease2), box-shadow .25s var(--fz-ease2);
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.philosophy-media-inner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.philosophy-media-inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.30);
}

.philosophy-glow {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(129,178,154,0.35), transparent 70%);
  filter: blur(40px);
  z-index: -1;
}

.philosophy-pill {
  position: absolute;
  left: 18px;
  bottom: 18px;
  max-width: 260px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  color: #ffffff;
  font-size: .8rem;
}

.philosophy-pill-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fz-green);
  margin-bottom: 4px;
}

.philosophy-pill-text {
  font-size: .86rem;
  line-height: 1.4;
}

.philosophy-keywords-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 10px;
}

.philosophy-keyword-pill {
  padding: 5px 11px;
  border-radius: 999px;
  background: #f4f7fb;
  border: 1px solid rgba(70,109,134,0.16);
  font-size: .78rem;
  font-weight: 500;
  color: var(--fz-blue-dark);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .18s var(--fz-ease2),
              box-shadow .18s var(--fz-ease2),
              background .18s var(--fz-ease2),
              color .18s var(--fz-ease2),
              border-color .18s var(--fz-ease2);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  justify-content: center;
}

.philosophy-keyword-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.philosophy-keywords-bar .philosophy-keyword-pill {
  border-color: rgba(129,178,154,0.8);
  background: rgba(129,178,154,0.08);
}

.philosophy-keywords-label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fz-blue-dark);
  opacity: .75;
  margin: 14px 0 6px;
}

.philosophy-values-card {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--fz-radius-md);
  background: #f4f7fb;
  border: 1px solid rgba(70,109,134,0.12);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.philosophy-values-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--fz-blue-dark);
  margin-bottom: 8px;
}

.philosophy-values-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .85rem;
  opacity: .95;
}

.philosophy-values-list li::before {
  content: "•";
  color: var(--fz-green);
  margin-right: 6px;
  font-size: 0.9rem;
}

/* Filosofia – tag orbitanti opzionali */
.philosophy-tags-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.philosophy-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(70,109,134,0.18);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  font-size: .78rem;
  font-weight: 500;
  color: var(--fz-blue-dark);
  opacity: 0.96;
  pointer-events: none;
}

.philosophy-tag-1 {
  top: 6%;
  left: 6%;
}

.philosophy-tag-2 {
  top: 10%;
  right: -4%;
}

.philosophy-tag-3 {
  bottom: 8%;
  right: 4%;
}


/* =======================================================
   TEAM
======================================================= */
.team-intro {
  max-width: 640px;
  margin-bottom: 16px;
}

.team-tabs {
  display: inline-flex;
  gap: 18px;
  margin: 26px 0 10px;
  font-size: .88rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.team-tab {
  padding: 0 0 10px;
  cursor: pointer;
  color: rgba(40,52,73,0.55);
  border-bottom: 2px solid transparent;
  transition: .18s;
  font-weight: 500;
}

.team-tab.active {
  color: var(--fz-blue-dark);
  border-color: var(--fz-blue);
}

.team-panel {
  display: none;
  margin-top: 16px;
}

.team-panel.active {
  display: block;
}

/* Default: desktop + tablet → 2 colonne */
.team-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px; /* spacing più ampio, più premium */
  margin-top: 12px;
}

.team-subtitle {
  font-size: 20px;
  font-weight: 600;
  color: #466d86;
  margin: 40px 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 20px;
}

.team-subtitle::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: #fb8500;
  margin-top: 6px;
  border-radius: 3px;
}



.team-item {
  position: relative;
  background: transparent;
  border-left: 3px solid rgba(70,109,134,0.14);
   padding: 16px 16px 16px 12px; /* 👈 padding uniforme */
  box-shadow: none;
  border-radius: 0;
  transition:
    background .22s var(--fz-ease2),
    transform .22s var(--fz-ease2),
    border-color .22s var(--fz-ease2),
    box-shadow .22s var(--fz-ease2);
  overflow: hidden;
}

.team-item:hover {
  background: rgba(70,109,134,0.035);
  border-color: var(--fz-blue);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15,23,42,0.10);
}

.team-item-photo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: linear-gradient(135deg,#f7f9fc,#eef3f8);
  border: 2px solid rgba(70,109,134,0.35);
  box-shadow:
    0 4px 10px rgba(70,109,134,0.18),
    inset 0 1px 1px rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
}


/* Mobile: leggermente più compatte ma sempre grandi */
@media (max-width: 700px) {
  .team-item-photo {
    width: 104px;
    height: 104px;
    margin-bottom: 10px;
  }
}


.team-item-photo img {
  width: 108%;
  height: 108%;
  object-fit: cover;
}

/* centratura custom foto */
.team-photo-fulvio img {
  object-position: center top;
}

.team-photo-francesca img {
  object-position: center;
}

.team-item-role {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--fz-orange);
}

.team-item--medico .team-item-role {
  color: var(--fz-orange);
  letter-spacing: .12em;
}

.team-item--assistente .team-item-role {
  color: var(--fz-green);
  letter-spacing: .12em;
}

.team-item--segreteria .team-item-role {
  color: var(--fz-blue);
    letter-spacing: .12em;

}

.team-item-name {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--fz-blue-dark);
}

.team-item-snippet {
  font-size: .9rem;
  line-height: 1.55;
  opacity: .9;
}

.member-bio-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  margin-top: 10px;
  border-radius: 999px;
  border: 1px solid rgba(70,109,134,0.45);
  background: #ffffff;
  color: var(--fz-blue-dark);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition:
    background .22s var(--fz-ease2),
    border-color .22s var(--fz-ease2),
    color .22s var(--fz-ease2),
    transform .22s var(--fz-ease2),
    box-shadow .22s var(--fz-ease2);
}

.member-bio-btn::after {
  content: "↗";
  font-size: .9rem;
  opacity: .85;
}

.member-bio-btn:hover {
  background: var(--fz-blue);
  color: #ffffff;
  border-color: var(--fz-blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}



/* Badge fondatori */
.team-founder-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: .70rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .10em;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb8500, #f6ad55);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.35);
  z-index: 2;
}

/* TEAM – POPUP BIO */
.team-bio-hidden {
  display: none;
}

.team-bio-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 90;
}

.team-bio-modal.is-open {
  display: flex;
}

.team-bio-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}

.team-bio-dialog {
  position: relative;
  max-width: 640px;
  max-height: 80vh;
  margin: 0 16px;
  padding: 20px 22px 22px;
  border-radius: var(--fz-radius-xl);
  background:
    radial-gradient(circle at top left, rgba(129,178,154,0.18), transparent 60%),
    #ffffff;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  border: 1px solid rgba(70,109,134,0.18);
  z-index: 1;
  overflow-y: auto;
}

.team-bio-dialog-inner {
  max-width: 620px;
  margin: 0 auto;
}

.team-bio-dialog-inner p {
  font-size: .95rem;
  line-height: 1.6;
  opacity: .95;
  margin: 0 0 10px;
  text-align: justify;
  text-justify: inter-word;
}

.team-bio-dialog-inner h3 {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 4px;
  color: var(--fz-blue-dark);
  position: relative;
  display: inline-block;
}

.team-bio-dialog-inner h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: var(--fz-orange);
  opacity: .9;
}

.team-bio-role {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fz-green);
  margin: 0 0 10px;
}

.team-bio-header {
  display: flex;
  align-items: center;
  gap: 16px;
  /*margin-bottom: 16px;*/
  position: relative;
}

.team-bio-photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg,#f7f9fc,#eef3f8);
  border: 2px solid rgba(70,109,134,0.30);
  box-shadow:
    0 6px 18px rgba(15,23,42,0.30),
    inset 0 1px 1px rgba(255,255,255,0.9);
}

.team-bio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-bio-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.team-bio-header-text h3 {
  margin: 0 0 6px;
}

.team-bio-header-text .team-bio-role {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--fz-green);
  opacity: 0.95;
  margin: 0;
}

.team-bio-hand {
  margin-top: 22px;
  font-family: var(--fz-font-hand);
  font-size: 1.45rem;
  color: var(--fz-orange);
  text-shadow: 0 2px 6px rgba(0,0,0,0.15);
  opacity: .95;
}

.team-bio-intro {
  font-size: 1rem;
  font-weight: 500;
  opacity: .98;
  margin-bottom:10px !important;
}

.team-bio-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0 22px;
}

.bio-pill {
  background: rgba(70,109,134,0.06);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 10px rgba(15,23,42,0.08);
  transition: transform .2s ease;
}

.bio-pill:hover {
  transform: translateY(-2px);
}

.bio-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.bio-pill-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.bio-pill-text strong {
  font-size: .85rem;
  color: var(--fz-green);
  display: block;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.bio-pill-text span {
  font-size: .75rem;
  opacity: .8;
  display: block;
}

.team-bio-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: rgba(255,255,255,0.95);
  color: var(--fz-blue-dark);
  font-size: 1.8rem;
  cursor: pointer;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  z-index: 10;
}

.team-bio-founder {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .10em;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb8500, #f6ad55);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.20);
  margin-bottom: 4px;
}

/* =======================================================
   RECENSIONI
======================================================= */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 20px;
}

/* Card recensione con lo stesso stile delle card servizi / team */
.review {
  position: relative;
  background: transparent;
  border-left: 3px solid rgba(70,109,134,0.14);
  padding: 16px 16px 16px 12px; /* 👈 FIX: aggiunto margine destro */
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transform: translateY(0);
  transition:
    background .22s var(--fz-ease2),
    transform .22s var(--fz-ease2),
    border-color .22s var(--fz-ease2),
    box-shadow .22s var(--fz-ease2);
}


.review:hover {
  background: rgba(70,109,134,0.035);
  border-color: var(--fz-blue);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15,23,42,0.10);
}

/* Contenuti interni */
.stars {
  color: #ffb400;
  font-size: .9rem;
  letter-spacing: .1em;
  margin-bottom: 6px;
}

.review-text {
  font-size: .95rem;
  line-height: 1.6;
  text-align: left;
  text-justify: inter-word;
  color: var(--fz-blue-dark);
  margin: 0 0 10px;
}

.review-name {
  font-family: 'Caveat', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  color: var(--fz-accent-green, #81b29a); /* puoi cambiare in arancione se preferisci */
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.2;
  transform: translateY(2px);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.03);
}

/* Badge stile cofondatore — versione recensioni */
.review {
  position: relative;
}

.review-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  text-transform:uppercase;
  color: #fff;
  font-size: 0.70rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    background: linear-gradient(135deg, #fb8500, #f6ad55);
}

.review-badge .icon {
  font-size: 0.75rem;
  line-height: 1;
}






/* STELLE WOW (gradient gold soft) */
.stars {
  background: linear-gradient(90deg, #f9d976, #f39f86);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* TESTO RECENSIONE IN ITALIC */
.review-text {
  font-style: italic;
  opacity: 0.95;
}




/* =======================================================
   CTA
======================================================= */
/* CTA con sfondo hero */
.cta-band {
  padding: 90px 0;
  text-align: center;
  color: white;
  background: linear-gradient(
    130deg,
    #1e2833 0%,
    #2c3b4c 30%,
    #466d86 100%
  );
  position: relative;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 70%);
  pointer-events: none;
}

.cta-title {
  color: #ffffff;
  font-size: 2.1rem;
  line-height: 1.18;
}

.cta-text {
  color: rgba(255,255,255,0.88);
  max-width: 800px;
  margin: 14px auto 28px;
  font-size: 1.08rem;
}




.cta-band .btn-primary {
  padding: 11px 22px;
  border-radius: 999px;
  background: #25D366;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  transition: .25s var(--fz-ease2);
}

.cta-band .btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
    background: #1fb358; /* leggermente più scuro in hover */
}

/* Bottone SECONDARIO (Parla con noi) → ARANCIONE */
.cta-band .btn-soft {
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--fz-orange);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(0,0,0,0.25);
    transition: .25s var(--fz-ease2);
}

.cta-band .btn-soft:hover {
  background: #ff9d33;
  transform: translateY(-2px) scale(1.03);
}

/* Bottone CTA arancione stile hero (per 'Vai ai contatti') */
/* Bottone arancione identico allo stile WhatsApp dell’hero */
/*
.btn-primary {
  padding: 11px 22px;
  border-radius: 999px;
  background: white;
  color: var(--fz-blue-dark);
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  transition: .25s var(--fz-ease2);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
}
*/

.btn-orange-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;

  /* IDENTICI al bottone WhatsApp */
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  transition: .25s var(--fz-ease2);

  /* Varianti colore */
  background: white;
  color: var(--fz-blue-dark);
}

.btn-orange-hero:hover {
  transform: translateY(-2px) scale(1.03);
  background: var(--fz-light);
}

/* Fix posizione banner cookie: sempre in basso centrato */
/* COOKIE BANNER – nascosto di default e centrato in basso */
#cookie-banner {
  display: none; /* 👈 fondamentale */
  position: fixed;
  bottom: 90px; /* prima 18px */
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  width: auto;
}


/* =======================================================
   COOKIE BANNER — CONTAINER VISIBILE
======================================================= */

/* COOKIE BANNER – nascosto di default e centrato in basso */
#cookie-banner {
  display: none; /* 👈 fondamentale */
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  width: auto;
}


#cookie-banner .cookie-inner {
  display: flex;
  align-items: center;
  gap: 22px;

  background:
    radial-gradient(circle at top left, rgba(129,178,154,0.10), transparent 60%),
    #ffffff;

  padding: 22px 26px;
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.15);
  border: 1px solid rgba(70,109,134,0.12);

  max-width: 900px;
}

/* testo */
#cookie-banner p {
  font-size: .95rem;
  margin: 0;
  max-width: 580px;
  color: var(--fz-blue-dark);
  line-height: 1.45;
}





/* =======================================================
   CONTATTI
======================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(260px,1.4fr);
  gap: 26px;
  margin-top: 16px;
}

.contact-form {
  background: #f4f7fb;
  border: 1px solid rgba(70,109,134,0.10);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 12px;
}

.contact-label-small {
  font-size: .75rem;
  color: var(--fz-blue-dark);
  font-weight: 500;
}

.contact-input,
.contact-textarea {
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(70,109,134,0.25);
  background: white;
  font-family: var(--fz-font);
  font-size: .85rem;
  transition: .2s;
}

.contact-input:focus,
.contact-textarea:focus {
  border-color: var(--fz-blue);
  box-shadow: 0 0 0 3px rgba(70,109,134,0.10);
}

.contact-textarea {
  resize: vertical;
  min-height: 90px;
}

.contact-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .8rem;
}

.contact-submit {
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--fz-blue);
  color: #ffffff;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}

.map-box {
  font-size: .9rem;
  opacity: 0.95;
}

/* label e lista contatti */
.contact-list p {
  margin: 0 0 6px;
  font-size: .9rem;
}

.contact-label {
  font-weight: 600;
  color: var(--fz-blue-dark);
}

/* righe form a due colonne */
.contact-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-form-row > div {
  flex: 1 1 160px;
}

/* =======================================================
   CONTATTI – VERSIONE WOW
======================================================= */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(260px,1.4fr);
  gap: 26px;
  margin-top: 16px;
  align-items: flex-start;
}

.contact-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card info contatto */
.contact-info-card {
  background:
    radial-gradient(circle at top left, rgba(129,178,154,0.10), transparent 60%),
    #ffffff;
  border-radius: var(--fz-radius-xl);
  border: 1px solid rgba(70,109,134,0.10);
  padding: 16px 18px;
  box-shadow: 0 14px 40px rgba(15,23,42,0.10);
  display: grid;
  gap: 10px;
}

.contact-list p {
  margin: 0 0 6px;
  font-size: .9rem;
}

.contact-label {
  font-weight: 600;
  color: var(--fz-blue-dark);
}

/* Blocchi extra (parcheggio, mezzi) */
.contact-extra {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1.1fr);
  gap: 12px;
  margin-top: 8px;
}

.contact-extra-block {
  background: rgba(244,247,251,0.95);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: .85rem;
  line-height: 1.5;
}

.contact-extra-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--fz-blue);
  margin-bottom: 3px;
}

/* Form un po' più “importante” */
.contact-form {
  background: #f4f7fb;
  border: 1px solid rgba(70,109,134,0.10);
  border-radius: 18px;
  padding: 18px 18px 14px;
  display: grid;
  gap: 12px;
}

.contact-label-small {
  font-size: .75rem;
  color: var(--fz-blue-dark);
  font-weight: 500;
}

/* già presenti ma ripetuti per completezza visiva */
.contact-input,
.contact-textarea {
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(70,109,134,0.25);
  background: white;
  font-family: var(--fz-font);
  font-size: .85rem;
  transition: .2s;
}

.contact-input:focus,
.contact-textarea:focus {
  border-color: var(--fz-blue);
  box-shadow: 0 0 0 3px rgba(70,109,134,0.10);
}

/* Nota sotto il form: micro-CTA, non una nuova sezione */
.contact-form-footnote {
  margin-top: 4px;
  font-size: .78rem;
  color: var(--fz-blue-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.contact-form-hint {
  opacity: .85;
}

.contact-link-inline {
  font-weight: 600;
  text-decoration: underline;
}

.contact-link-inline:hover {
  color: var(--fz-orange);
}

.contact-dot {
  opacity: .6;
}

/* Colonna destra: card mappa */
.contact-map-card {
  background: #ffffff;
  border-radius: var(--fz-radius-xl);
  border: 1px solid rgba(70,109,134,0.10);
  box-shadow: 0 18px 45px rgba(15,23,42,0.12);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-map-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.contact-map-sub {
  font-size: .8rem;
  opacity: .85;
  margin-top: 2px;
}



.contact-map-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(70,109,134,0.18);
  background: var(--fz-blue);
  color: #ffffff;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(15,23,42,0.25);
  transition: .22s var(--fz-ease2);
}

.contact-map-btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: var(--fz-orange);
  border-color: transparent;
}

.contact-map-btn-secondary {
  background: #ffffff;
  color: var(--fz-blue-dark);
  box-shadow: 0 8px 22px rgba(15,23,42,0.14);
}

.contact-map-btn-secondary:hover {
  background: var(--fz-light);
}

/* Iframe mappa */
.contact-map-embed {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(70,109,134,0.18);
}

.contact-map-embed iframe {
  width: 100%;
  height: 260px;
  border: 0;
}

.contact-map-card {
  background: #ffffff;
  border-radius: var(--fz-radius-xl);
  border: 1px solid rgba(70,109,134,0.10);
  box-shadow: 0 18px 45px rgba(15,23,42,0.12);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Iframe mappa: si allunga quanto può */
.contact-map-embed {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(70,109,134,0.18);
  flex: 1;                    /* << occupa spazio verticale */
  display: flex;
  margin-top:8px;
}

.contact-map-embed iframe {
  width: 100%;
  height: 100%;               /* << riempie il contenitore */
  min-height: 260px;          /* non scende sotto questa altezza */
  border: 0;
}


/* Righe form a due colonne (già presenti) */
.contact-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-form-row > div {
  flex: 1 1 160px;
}


.contact-label-small {
  font-size: .75rem;
  color: var(--fz-blue-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* sottotitolo sotto il titolo mappa */
.contact-map-sub {
  font-size: .85rem;
  color: var(--fz-blue-dark);
  opacity: .85;
  margin-top: 4px;
}

/* etichetta dei blocchi parcheggio/mezzi – già coerente, la lasciamo */
.contact-extra-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--fz-blue);
  margin-bottom: 3px;
}

/* link contatti più evidenti */
.contact-list a {
  font-weight: 600;
  color: var(--fz-blue-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(70,109,134,0.28);
  padding-bottom: 1px;
  transition:
    color .2s var(--fz-ease2),
    border-bottom-color .2s var(--fz-ease2),
    transform .2s var(--fz-ease2);
}

.contact-list a:hover {
  color: var(--fz-orange);
  border-bottom-color: rgba(251,133,0,0.75);
  transform: translateY(-1px);
}

.contact-map-card a:not(.contact-map-btn) {
  font-weight: 600;
  color: var(--fz-blue-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(70,109,134,0.28);
  padding-bottom: 1px;
}

.contact-map-card a:not(.contact-map-btn):hover {
  color: var(--fz-orange);
  border-bottom-color: rgba(251,133,0,0.75);
}

.contact-submit {
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--fz-blue);
  color: #ffffff;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.18);
  transition:
    background .2s var(--fz-ease2),
    transform .2s var(--fz-ease2),
    box-shadow .2s var(--fz-ease2);
}

.contact-submit:hover {
  background: var(--fz-orange);
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(15,23,42,0.22);
}


/* Responsive contatti */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contact-extra {
    grid-template-columns: 1fr;
  }

  .contact-map-card {
    order: -1; /* mappa sopra su mobile */
  }

  .contact-map-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}


/* =======================================================
   INSTAGRAM
======================================================= */
#instagram .instagram-widget {
  margin-top: 18px;
}

#instagram .lightwidget-widget {
  width: 100% !important;
  border: 0;
  overflow: hidden;
}

/* =======================================================
   COOKIE BANNER
======================================================= */
/* Contenitore colonnare dei bottoni del cookie */
#cookie-banner .cookie-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Bottoni blu e verde con stessa larghezza */
#cookie-accept,
#cookie-continue {
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  color: #ffffff;
  white-space: nowrap;
  width: 160px; /* 👈 valore perfetto per le tue label */
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transition: .25s var(--fz-ease2);
}

/* Blu */
#cookie-accept {
  background: var(--fz-blue);
}

/* Verde */
#cookie-continue {
  background: #81b29a;
}

/* Hover uniforme in arancione */
#cookie-accept:hover,
#cookie-continue:hover {
  background: var(--fz-orange);
  transform: translateY(-2px) scale(1.03);
}

/* Link “Informativa” allineato perfettamente */
#cookie-banner .link-button {
  background: none;
  border: none;
  color: var(--fz-blue);
  font-size: .8rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 0;
  width: 160px;  /* 👈 stessa larghezza dei bottoni */
  text-align: center;  /* 👈 perfetto allineamento */
}


/* =======================================================
   FOOTER – PREMIUM CON MINI LOGO
======================================================= */

footer {
  border-top: 1px solid rgba(70,109,134,0.10);
}

.footer {
  background:
    radial-gradient(circle at top left, rgba(129,178,154,0.10), transparent 70%),
    #f6f6f6;
  padding: 32px 0 26px;
  font-size: 0.86rem;
  color: var(--fz-blue-dark);
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  gap: 22px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
    align-items: flex-start;   /* 👈 FIX */
}

/* --- Colonna brand con mini logo --- */
.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo {
  height: 34px;
  width: auto;
  display: block;
}

.footer-brand {
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .05em;
  color: var(--fz-blue);
  text-transform: uppercase;
  margin: 0;
}

.footer-tagline {
  margin: 2px 0 0;
  font-family: var(--fz-font-hand);
  font-size: 1rem;          /* un filo più grande per il footer */
  font-weight: 700;
  color: var(--fz-green);
  line-height: 1.2;
  opacity: 0.95;
}


.footer-copy {
  margin: 6px 0 0;
  font-size: 0.80rem;
  opacity: 0.8;
}

/* --- Label colonne --- */
.footer-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;         /* 👈 leggero grassetto elegante */
  color: var(--fz-blue);    /* 👈 più contrasto, più leggibilità */
  opacity: 0.95;            /* 👈 meno trasparenza */
  margin-bottom: 4px;
}


/* --- Testo colonne --- */
.footer-col p {
  margin: 0;
  opacity: 0.85;
  line-height: 1.45;
}

.footer-col a {
  color: var(--fz-blue);
  font-weight: 500;
}

/* --- Privacy link --- */
.footer-privacy-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--fz-blue);
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;   /* forza l’allineamento esatto a sinistra */
}


.footer-privacy-link:hover {
  opacity: .8;
}

.footer-address {
  position: relative;
  padding-left: 18px;
}

.footer-address::before {
  content: "📍";
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: 0.9rem;
}


/* --- Responsive --- */
@media (min-width: 780px) {
  .footer-inner {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

@media (max-width: 779px) {
  .footer-inner {
    gap: 16px;
  }
}

/* Spazio extra solo su mobile perché la sticky bar non copra il footer */
/*@media (max-width: 900px) {
  footer {
    padding-bottom: 80px; 
  }
}*/


/* Pulsante stile link */
.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #466d86;
  text-decoration: underline;
  cursor: pointer;
}
.link-button:hover {
  opacity: 0.8;
}

/* MODAL PRIVACY */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--fz-ease2);
}

.modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.modal-dialog {
  position: relative;
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  margin: 0 auto;
  padding: 24px 26px 22px;
  border-radius: var(--fz-radius-xl);
  background:
    radial-gradient(circle at top left, rgba(129,178,154,0.18), transparent 60%),
    #ffffff;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  border: 1px solid rgba(70,109,134,0.18);
  overflow-y: auto;
  transform: translateY(10px) scale(.97);
  opacity: 0;
  transition:
    transform .25s var(--fz-ease2),
    opacity .25s var(--fz-ease2);
}

.modal-overlay.is-visible .modal-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Tipografia interna più leggibile */
/* Titoli delle popup (es. Informativa Privacy & Cookie) con sottolineatura stile bio */
.modal-dialog h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.4rem;
  color: var(--fz-blue-dark);
  position: relative;
  display: inline-block;
}

.modal-dialog h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: var(--fz-orange);
  opacity: .9;
}

.modal-body p {
  margin-bottom: 12px;
  font-size: .95rem;
  line-height: 1.6;
}

/* Bottone X in alto a destra, dentro la modale */
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: rgba(0,0,0,0.06);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: rgba(0,0,0,0.12);
}

/* ================================
   STICKY BAR FZ – SEMPRE VISIBILE
================================ */
.fz-sticky-mobile {
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;

  display: flex;
  justify-content: space-around;
  align-items: center;

  padding: 10px 12px;

  /* Card flottante chiara, in linea col menu mobile */
  background:
    radial-gradient(circle at top left, rgba(129,178,154,0.08), transparent 60%),
    rgba(255,255,255,0.97);
  backdrop-filter: blur(18px);

  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.06);

  /* Ombra più focalizzata per staccarla dal contenuto */
  box-shadow:
    0 14px 30px rgba(15,23,42,0.25),
    0 4px 12px rgba(15,23,42,0.16);

  z-index: 9999;

  transform: translateY(100%);
  opacity: 0;
  transition:
    transform .350 var(--fz-ease2),
    opacity .30s var(--fz-ease2);
}

/* Quando aggiungiamo .is-visible via JS → compare con slide-up */
.fz-sticky-mobile.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Quando il footer è visibile, nascondiamo la sticky per non coprirlo */
.fz-sticky-mobile.is-hidden-footer {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}


.fz-sticky-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: var(--fz-blue-dark);

  font-size: 0.75rem;
  font-weight: 600;

  width: 33%;
}

.fz-sticky-icon,
.fz-sticky-label {
  transition:
    transform .18s var(--fz-ease2),
    opacity .18s var(--fz-ease2),
    color .18s var(--fz-ease2);
}

.fz-sticky-icon {
  font-size: 1.45rem;
  line-height: 1;
  margin-bottom: 4px;
}

.fz-sticky-label {
  opacity: .9;
}

/* Hover generale: micro-movimento icona + label un filo più piena */
.fz-sticky-btn:hover .fz-sticky-icon {
  transform: translateY(-1px) scale(1.06);
}

.fz-sticky-btn:hover .fz-sticky-label {
  opacity: 1;
}

.fz-sticky-btn:active {
  transform: scale(0.96);
}

/* WhatsApp con leggera priorità visiva */
.fz-sticky-btn-wa .fz-sticky-icon {
  font-size: 1.6rem; /* un filo più grande */
}

/* Sottolineatura morbida sotto la label WhatsApp */
.fz-sticky-btn-wa .fz-sticky-label {
  position: relative;
}

.fz-sticky-btn-wa .fz-sticky-label::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--fz-green); /* verde brand */
  margin: 4px auto 0;
  opacity: .7;
  transition:
    opacity .18s var(--fz-ease2),
    width .18s var(--fz-ease2);
}

.fz-sticky-btn-wa:hover .fz-sticky-label::after {
  opacity: 1;
  width: 32px;
}

/* Su schermi piccoli riduciamo un filo il testo per evitare troppi a capo */
@media (max-width: 600px) {
  .fz-sticky-label {
    font-size: 0.7rem;
  }
}

@media (min-width: 900px) {
  .fz-sticky-mobile {
    display: none !important;
  }
}
/* Grid base: 2 colonne simmetriche */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(0,1.5fr);
  gap: 26px;
  margin-top: 16px;
  align-items: flex-start;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(260px,1.4fr);
  gap: 26px;
  margin-top: 16px;
  align-items: stretch;       /* << allineamento in altezza */
}

/* entrambe le card “tirate” a tutta altezza riga */
.contact-main-card,
.contact-map-card {
  height: 100%;
}

/* CARD SINISTRA: CONTATTI + FORM */
.contact-main-card {
  background:
    radial-gradient(circle at top left, rgba(129,178,154,0.10), transparent 60%),
    #ffffff;
  border-radius: var(--fz-radius-xl);
  border: 1px solid rgba(70,109,134,0.10);
  padding: 16px 18px;
  box-shadow: 0 14px 40px rgba(15,23,42,0.10);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* lascia la contact-list com'è, solo un piccolo refine */
.contact-list p {
  margin: 0 0 6px;
  font-size: .9rem;
}

/* Il form ora è "piatto" dentro la card */
.contact-form {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 0 0;
  box-shadow: none;
  display: grid;
  gap: 10px;
}

/* form rows (se non li hai già così) */
.contact-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-form-row > div {
  flex: 1 1 160px;
}

/* FOOTNOTE MICRO CTA: già vista prima, ma la ripeto */
.contact-form-footnote {
  margin-top: 4px;
  font-size: .78rem;
  color: var(--fz-blue-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.contact-form-hint {
  opacity: .85;
}

.contact-link-inline {
  font-weight: 600;
  text-decoration: underline;
}

.contact-link-inline:hover {
  color: var(--fz-orange);
}

.contact-dot {
  opacity: .6;
}

/* CARD DESTRA: MAPPA (la tua contact-map-card va benissimo, la lascerei come già l’abbiamo definita) */

/* Blocchi parcheggio/mezzi dentro la mappa */
.contact-extra {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  margin-top: 8px;
}

.contact-extra-block {
  background: rgba(244,247,251,0.95);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: .85rem;
  line-height: 1.5;
}

.contact-extra-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--fz-blue);
  margin-bottom: 3px;
}



/* Responsive: una colonna su mobile */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contact-extra {
    grid-template-columns: 1fr;
  }

  .contact-map-card {
    order: -1; /* mappa sopra su mobile */
  }
}

.link-inline {
  display: inline-block;
  margin-top: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--fz-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(70,109,134,0.35);
  padding-bottom: 2px;
}

.link-inline:hover {
  color: var(--fz-orange);
  border-bottom-color: rgba(251,133,0,0.7);
}

/* Honeypot anti-spam: nascosto agli umani, visibile ai bot */
.hp-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Popup di conferma / errore form */
.form-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(12px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.form-toast-inner {
  background: #0f172a;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: .85rem;
  box-shadow: 0 12px 30px rgba(15,23,42,0.55);
  max-width: 90vw;
  text-align: center;
}

.form-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.form-toast--success .form-toast-inner {
  background: #16a34a; /* verde ok */
}

.form-toast--error .form-toast-inner {
  background: #b91c1c; /* rosso errore */
}

/* Stato loading del bottone invio */
.contact-submit.is-loading {
  opacity: .7;
  cursor: wait;
}

/* Icona Instagram in navbar */
.nav-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;
  border-radius: 999px;

  margin-left: 10px;
  margin-right: 4px;

  background: rgba(0,0,0,0.04);
  text-decoration: none;
  cursor: pointer;

  transition:
    background 0.22s var(--fz-ease2),
    transform 0.22s var(--fz-ease2),
    box-shadow 0.22s var(--fz-ease2);
}

.nav-ig-icon {
  font-size: 18px;
}

/* Hover: piccolo glow, in linea con gli altri bottoni */
.nav-ig:hover {
  background: rgba(0,0,0,0.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* =======================================================
   QUICK NAV – pillolina premium
   Desktop: verticale a destra
   Tablet/Mobile: orizzontale in basso
======================================================= */

#quick-nav {
  position: fixed;
  top: 50%;
  right: 26px;
  transform: translateY(-50%);
  z-index: 9500;
  opacity: 0;
  pointer-events: none;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* JS aggiunge questa classe quando deve essere visibile */
#quick-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Wrapper dei pallini (versione desktop: verticale) */
#quick-nav ul {
  list-style: none;
  margin: 0;
  padding: 10px 8px;

  display: flex;
  flex-direction: column;
  gap: 10px;

  background: rgba(255,255,255,0.96);
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.30);
  box-shadow:
    0 10px 25px rgba(15,23,42,0.18),
    0 4px 12px rgba(15,23,42,0.12);
}

#quick-nav li {
  margin: 0;
}

/* pallini base */
#quick-nav a {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
  background: rgba(148,163,184,0.55);
  transition:
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease;

  /* testo nascosto ma accessibile */
  font-size: 0;
  line-height: 0;
}

/* hover */
#quick-nav a:hover {
  background: rgba(148,163,184,0.85);
  transform: scale(1.2);
}

/* sezione attiva */
#quick-nav a.active {
  background: var(--fz-green);
  transform: scale(1.35);
  box-shadow: 0 0 0 4px rgba(129,178,154,0.20);
}



/* =======================================================
   FAQ – Domande frequenti
======================================================= */

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 40px;
  margin-top: 26px;
  align-items: flex-start;
}

.faq-intro .section-text {
  margin-bottom: 14px;
}

.faq-highlights {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.faq-highlights li {
  font-size: 0.95rem;
  margin-bottom: 6px;
}

/* Colonna destra FAQ (ricerca + lista) */
.faq-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Barra di ricerca FAQ */
.faq-search {
  margin-bottom: 2px;
}

.faq-search-label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.7);
  margin-bottom: 6px;
  display: block;
}

.faq-search-field {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 10px 20px rgba(15,23,42,0.06);
}

.faq-search-icon {
  font-size: 0.9rem;
  margin-right: 6px;
  opacity: 0.7;
}

#faq-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  width: 100%;
  padding: 4px 2px;
  color: var(--fz-blue-dark);
}

#faq-search-input::placeholder {
  color: rgba(15,23,42,0.45);
}

.faq-search-hint {
  margin-top: 4px;
  font-size: 0.8rem;
  color: rgba(15,23,42,0.6);
}

/* Badge filtro attivo */
.faq-search-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 10px 4px 10px;
  background: rgba(129,178,154,0.1);
  border: 1px solid rgba(129,178,154,0.4);
  font-size: 0.83rem;
  color: var(--fz-blue-dark);
}

.faq-search-badge[hidden] {
  display: none !important;
}

.faq-search-badge-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 0.72rem;
  opacity: 0.8;
}

.faq-search-badge-term {
  font-weight: 600;
}

.faq-search-badge-clear {
  border: none;
  outline: none;
  background: rgba(255,255,255,0.7);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 0.78rem;
  cursor: pointer;
  color: rgba(15,23,42,0.7);
  transition: background .18s var(--fz-ease2), transform .18s var(--fz-ease2);
}

.faq-search-badge-clear:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

/* Messaggio “nessun risultato” */
.faq-empty {
  margin-top: 4px;
  font-size: 0.9rem;
  color: rgba(148,27,45,0.9);
}


/* Lista FAQ */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Card FAQ */

.faq-item {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  padding: 10px 16px 4px;
  border: 1px solid rgba(70,109,134,0.07);
  box-shadow: 0 10px 28px rgba(15,23,42,0.04);
  transition:
    box-shadow .22s var(--fz-ease2),
    transform .22s var(--fz-ease2),
    border-color .22s var(--fz-ease2),
    background .22s var(--fz-ease2);
}

/* Banda verde laterale quando aperto */

.faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  transition: background .22s var(--fz-ease2);
}

.faq-item.is-open {
  background: linear-gradient(135deg, rgba(129,178,154,0.10), #ffffff);
  border-color: rgba(129,178,154,0.65);
  box-shadow: 0 14px 30px rgba(15,23,42,0.12);
  transform: translateY(-1px);
}

.faq-item.is-open::before {
  background: var(--fz-green, #81b29a);
}

/* Header domanda */

.faq-question {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  display: flex;
  gap: 10px;
  padding: 4px 0 8px;
  cursor: pointer;
  text-align: left;
  align-items: center; /* prima era flex-start */
}

.faq-q-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  background: radial-gradient(circle at 30% 20%, #ffffff, #81b29a);
  box-shadow: 0 4px 10px rgba(15,23,42,0.13);
  color: #1f2933;
  margin-top: 1px; /* micro tweak per centraggio ottico */
}

.faq-q-text {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--fz-blue-dark, #1f2933);
  line-height: 1.4;
}

.faq-toggle {
  margin-left: auto;
  font-size: 1.15rem;
  line-height: 1;
  transform-origin: center;
  transition: transform .22s var(--fz-ease2), color .22s var(--fz-ease2);
  color: rgba(15,23,42,0.65);
}

.faq-item.is-open .faq-toggle {
  transform: rotate(45deg);
  color: var(--fz-green, #81b29a);
}

/* Risposta */

.faq-answer {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fz-blue-dark, #1f2933);
  padding: 0 4px 10px 40px;
  max-height: none; /* versione "espansa" di base per SEO */
  opacity: 1;
  transition:
    max-height .25s ease,
    opacity .18s ease;
}

/* Modalità accordion (quando JS è attivo) */

.faq-item.faq--js .faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-bottom: 0;
}

.faq-item.faq--js.is-open .faq-answer {
  max-height: 600px; /* sufficiente per 2–3 paragrafi */
  opacity: 1;
  padding-bottom: 12px;
}

/* Responsive */

@media (max-width: 960px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .faq-answer {
    padding-left: 38px;
  }
}

@media (max-width: 640px) {
  .faq-item {
    padding: 8px 12px 2px;
  }

  .faq-q-text {
    font-size: 0.95rem;
  }

  .faq-answer {
    font-size: 0.92rem;
  }
}






/* =======================================================
   RESPONSIVE
======================================================= */

/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    padding-top: 80px;
    padding-bottom: 60px;
  }

  .hero-left::before {
    width: 260px;
    height: 260px;
    left: -20px;
    top: -20px;
  }

  .hero-carousel {
    width: 100%;
    margin-top: 20px;
  }

  .philosophy-grid-img,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .nav-wa-label {
    display: inline-block;
  }
  }

  /* HEADER / NAV MOBILE – SOLO il nav dentro l’header */
  @media (max-width: 900px) {
    .header-inner {
      padding-inline: 14px;
    }

    /* Nav a tendina sotto l'header */
	header nav {
	  position: absolute;
	  top: 100%;
	  left: 12px;
	  right: 12px;
	  margin-top: 10px;
	  padding: 12px 12px 14px;
	  border-radius: 20px;
	  background:
	    radial-gradient(circle at top left, rgba(129,178,154,0.10), transparent 60%),
	    rgba(255,255,255,0.98);
	  box-shadow: 0 18px 40px rgba(15,23,42,0.28);
	  flex-direction: column;
	  align-items: flex-start;
	  gap: 6px;
	  max-height: 0;
	  opacity: 0;
	  pointer-events: none;
	  overflow: hidden;
	  transform: translateY(-8px);
	  transition:
	    opacity .24s var(--fz-ease2),
	    transform .24s var(--fz-ease2),
	    max-height .24s var(--fz-ease2);
	}


    /* Quando l’header ha nav-open (gestito dal JS) */
    header.nav-open nav {
      max-height: 400px;
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    /* Nascondo il gruppo orizzontale principale */
    .nav-primary-links {
      display: none;
    }

    /* Nascondo eventuali <a> diretti vecchi (come quelli che avevi prima) */
    /*header nav > a:not(.nav-wa):not(.nav-cta) {
      display: none;
    }*/

    /* Contenitore menu Sezioni in colonna */
    .nav-sections {
      width: 100%;
      margin-top: 4px;
    }

    /* Su mobile nessun bottone “Sezioni ▾”: mostro direttamente la lista */
    .nav-sections-toggle {
      display: none;
    }

    .nav-sections-menu {
      position: static;
      padding: 0;
      margin-top: 2px;
      border-radius: 0;
      background: transparent;
      box-shadow: none;

      opacity: 1;
      pointer-events: auto;
      transform: none;
      max-height: none;

      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .nav-sections-menu a {
      width: 100%;
    }

    /* Tutti i link dentro il nav full-width */
    header nav a {
      width: 100%;
      padding: 6px 10px;
    }

    .nav-cta,
    .nav-wa {
      justify-content: center;
    }

    /* Mostro il toggle hamburger */
    .nav-toggle {
      display: inline-flex;
    }
  }


 

/* Team: 1 colonna su mobile */
@media (max-width: 700px) {
  .team-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-item {
    padding: 16px 14px 16px;
  }
}

/* Team: max 3 card per riga su desktop */
@media (min-width: 900px) {
  .team-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ============================================
   X di chiusura – stile unico per tutte le popup
============================================ */
.team-bio-close,
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(70,109,134,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  font-size: 1.2rem;
  line-height: 1;
  color: var(--fz-blue-dark);

  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);

  transition: .25s ease;
}

.team-bio-close:hover,
.modal-close:hover {
  background: #ffffff;
  transform: scale(1.07);
}

/* ============================================
   POPUP UNIFICATE (BIO + PRIVACY)
============================================ */

/* Contenitore delle due modali (stessa dimensione e stile) */
.team-bio-dialog,
.modal-dialog {
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  margin: 0 16px;
  padding: 24px 26px 22px;
  border-radius: var(--fz-radius-xl);
  background:
    radial-gradient(circle at top left, rgba(129,178,154,0.18), transparent 60%),
    #ffffff;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  border: 1px solid rgba(70,109,134,0.18);
  overflow-y: auto;
}

/* Titoli con stessa sottolineatura delle bio */
.team-bio-dialog-inner h3,
.modal-dialog h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.4rem;
  color: var(--fz-blue-dark);
  position: relative;
  display: inline-block;
}

.team-bio-dialog-inner h3::after,
.modal-dialog h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: var(--fz-orange);
  opacity: .9;
}

/* Testo interno uniforme */
.team-bio-dialog-inner p,
.modal-dialog p {
  margin-bottom: 12px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--fz-blue-dark);
}

.team-bio-dialog-inner p
{
  margin-bottom: 0px;
}

/* ===========================
   FZ DENTAL TEAM – CHATBOT
   Versione solo pulsanti
   Integrata con layout
   =========================== */

/* Chatbot più soft a riposo */
.fz-chatbot {
  position: fixed;
  inset-block-end: 26px;  /* da 120px → 26px */
  inset-inline-end: 26px; /* un po' più lontano dal bordo */
  z-index: 9000;
  font-family: inherit;

  /* nessuno sfondo, nessun hover sul wrapper */
  background: transparent;
}




/* --- Toggle Button (bollicina) --- */
.fz-chatbot-toggle {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: none;
  background: var(--fz-blue, #466d86);
  color: #ffffff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* stato idle più soft */
  opacity: 0.8;
  transform: scale(0.94);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);

  cursor: pointer;
  transition:
    opacity 0.22s var(--fz-ease2),
    transform 0.22s var(--fz-ease2),
    box-shadow 0.22s var(--fz-ease2),
    background-color 0.22s var(--fz-ease2);

  /* niente highlight brutti su click */
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.fz-chatbot-toggle:hover,
.fz-chatbot-toggle:focus-visible {
  opacity: 1;
  transform: scale(1) translateY(-1px);
  background: var(--fz-blue-dark, #3b5d72);
  box-shadow: 0 12px 28px rgba(0,0,0,0.26);
}


/* --- Chat window --- */
.fz-chatbot-window {
  /* fisso al viewport, non più legato al wrapper */
  position: fixed;
  right: 26px;
  bottom: 96px; /* finestra sopra la bolla + un po’ di respiro */

  width: 360px;
  max-width: calc(100vw - 32px);
  /* tutta la finestra sempre visibile */
  max-height: calc(100vh - 40px);

  background: var(--fz-card-bg, #ffffff);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}


/* Finestra visibile SOLO quando il wrapper ha .fz-chatbot-open */
.fz-chatbot-open .fz-chatbot-window {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* --- Header --- */
.fz-chatbot-header {
  background: var(--fz-blue, #466d86);
  color: #ffffff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fz-chatbot-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fz-chatbot-dot {
  width: 8px;
  height: 8px;
  background: var(--fz-green, #81b29a);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(129,178,154,0.35);
}

.fz-chatbot-close {
  background: transparent;
  border: none;
  font-size: 20px;
  color: #ffffff;
  cursor: pointer;
  line-height: 1;
}

.fz-chatbot-body {
  flex: 1;
  background: var(--fz-light, #f6f6f6);
  /* più spazio ai lati e in basso */
  padding: 12px 14px 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Messaggi */
.fz-chatbot-messages {
  flex: 1;
  min-height: 0; /* ESSENZIALE PER LO SCROLL */
  overflow-y: auto !important;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

.fz-chatbot-messages::-webkit-scrollbar {
  width: 6px;
}
.fz-chatbot-messages::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.22);
  border-radius: 999px;
}

/* Messaggio BOT */
.fz-chatbot-message {
  max-width: 90%;
  padding: 9px 11px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  animation: fz-chat-pop .18s ease-out;
}


.fz-chatbot-bot {
  background: #ffffff;
  border-radius: 14px 14px 14px 4px;
  align-self: flex-start;
  border: 1px solid rgba(0,0,0,0.03);
}

/* Messaggio UTENTE (label pulsante cliccato) */
.fz-chatbot-user {
  background: var(--fz-blue, #466d86);
  color: #ffffff;
  border-radius: 14px 14px 4px 14px;
  align-self: flex-end;
}

/* Link dentro messaggi */
.fz-chatbot-message a {
  color: var(--fz-blue, #466d86);
  text-decoration: underline;
}

/* --- Quick buttons (pillole) --- */
.fz-chatbot-quick {
  margin-top: 6px;
  /* aggiungo padding anche a sinistra e destra */
  padding: 0 8px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}


.fz-chatbot-quick-btn {
  padding: 6px 11px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid #d2d7dc;
  background: #ffffff;
  border-radius: 999px;
  cursor: pointer;
  transition: .15s ease;
}

.fz-chatbot-quick-btn:hover {
  background: var(--fz-blue, #466d86);
  border-color: var(--fz-blue, #466d86);
  color: #ffffff;
  transform: translateY(-1px);
}

.fz-chatbot-footer {
  padding: 10px 14px 14px; /* extra bottom padding */
  border-top: 1px solid #e4e7eb;
  background: #ffffff;
}


.fz-chatbot-hint {
  font-size: 11px;
  color: #969ba1;
  text-align: center;
  line-height: 1.35;
}

@keyframes fz-chat-pop {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fz-chatbot-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 6px;
  opacity: 0;
  transition: opacity .15s ease;
}

.fz-chatbot-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
  animation: fz-chat-typing 1s infinite ease-in-out;
}

.fz-chatbot-typing-dot:nth-child(2) {
  animation-delay: .15s;
}
.fz-chatbot-typing-dot:nth-child(3) {
  animation-delay: .3s;
}

.fz-chatbot-typing.is-visible {
  opacity: 1;
}

@keyframes fz-chat-typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: .5;
  }
  30% {
    transform: translateY(-2px);
    opacity: 1;
  }
}

/* Chatbot inizialmente nascosto, poi mostrato con classe .fz-chatbot-ready */
.fz-chatbot.fz-chatbot-init {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.fz-chatbot.fz-chatbot-init.fz-chatbot-ready {
  opacity: 1;
  pointer-events: auto;
}

.fz-chatbot-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 6px;
  opacity: 0;
  transition: opacity .15s ease;
}

.fz-chatbot-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
  animation: fz-chat-typing 1s infinite ease-in-out;
}

.fz-chatbot-typing-dot:nth-child(2) {
  animation-delay: .15s;
}
.fz-chatbot-typing-dot:nth-child(3) {
  animation-delay: .3s;
}

.fz-chatbot-typing.is-visible {
  opacity: 1;
}

@keyframes fz-chat-typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: .5;
  }
  30% {
    transform: translateY(-2px);
    opacity: 1;
  }
}

/* Variante per pulsanti speciali */
.fz-chatbot-quick-btn-wa {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
}

.fz-chatbot-quick-btn-wa:hover {
  filter: brightness(0.95);
}

.fz-chatbot-quick-btn-call {
  background: var(--fz-blue, #466d86);
  border-color: var(--fz-blue, #466d86);
  color: #ffffff;
}

.fz-chatbot-quick-btn-call:hover {
  filter: brightness(0.95);
}

.fz-chatbot-quick-btn-maps {
  background: #ffffff;
  border-color: #81b29a;
  color: #466d86;
}

.fz-chatbot-quick-btn-maps:hover {
  background: #81b29a;
  color: #ffffff;
}

.fz-chatbot-toggle {
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 10px rgba(0,0,0,0.15) !important;
}

/* Bottoni telefono: testo e icona bianchi */
.fz-chatbot-quick-btn-call {
  background: var(--fz-blue, #466d86);
  border-color: var(--fz-blue, #466d86);
  color: #ffffff;
}

/* Forza in bianco eventuali icone dentro il bottone */
.fz-chatbot-quick-btn-call i,
.fz-chatbot-quick-btn-call svg,
.fz-chatbot-quick-btn-call span.icon {
  color: #ffffff;
  fill: #ffffff;
}


@media (max-width: 900px) {
  .fz-chatbot {
    z-index: 99999;        /* sopra la sticky */
    inset-block-end: 100px; /* ben sopra la pillola */
    inset-inline-end: 16px; /* un filo più dentro */
  }
  }
/* --- Mobile --- */
  @media (max-width: 600px) {
    .fz-chatbot-window {
      /* centrata e un filo più larga */
      left: 10px;
      right: 10px;
      bottom: 80px;         /* un po’ sopra la bolla */
      width: auto;
      /* la finestra non viene mai tagliata */
      max-height: calc(100vh - 90px);
    }
  }




@media (max-width: 600px) {
  .hero-title {
    font-size: 2.1rem;
  }

  .hero-caption {
    font-size: 0.9rem;
    bottom: 14px;
    left: 14px;
    padding: 8px 14px;
  }

  nav {
    font-size: .8rem;
  }

  .hero {
    padding-inline: 16px;
  }

  .page {
    padding-inline: 16px;
  }

  .hero-slides {
    min-height: 260px;
  }

  .philosophy-keywords-bar {
    gap: 6px;
  }

  .philosophy-keyword-pill {
    font-size: .74rem;
    padding: 4px 9px;
  }

  .philosophy-values-card {
    padding: 14px 14px;
  }

  .team-bio-header {
    align-items: flex-start;
    gap: 12px;
  }

  .team-bio-photo {
    width: 72px;
    height: 72px;
  }

  #cookie-banner {
    width: calc(100% - 32px);
    border-radius: 18px;
  }

  #cookie-banner .cookie-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* MOBILE – sezione Studio: 5 immagini una sotto l'altra, tutte uguali */
@media (max-width: 900px) {
  .studio-top {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: auto;
  }

  .studio-photo-big,
  .studio-right,
  .studio-right .studio-photo,
  .studio-bottom,
  .studio-thumb {
    flex: none;
    width: 100%;
    height: auto;
  }

  /* Contenitore sotto: colonna, niente scroll orizzontale */
  .studio-bottom {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-x: visible;
    padding-bottom: 0;
  }

  /* Tutte le immagini studio con stessa proporzione 4:3 */
  .studio-photo img,
  .studio-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

@media (max-width: 600px) {
  .studio-thumb {
    flex: none;
    height: auto;
  }
}

/* PATCH – Percorso: allineamenti come Servizi/Team/Recensioni */
.care-step.service-item {
  /* stessa altezza visiva delle altre card */
  padding-bottom: 20px;  /* come le service-item */
}

/* Numero nella pallina perfettamente centrato */
.care-step-number {
  font-family: var(--fz-font-hand);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--fz-blue-dark);
  display: block;
  width: 100%;
  text-align: center;
  margin-right: 0; /* elimina lo spostamento a destra */
}

/* Pallina del percorso: solo centratura, eredita tutto da .service-media */
.care-step-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

/* =======================================================
   QUICK NAV – Micro menu laterale (versione minimale)
======================================================= */
.quick-nav {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--fz-ease2);
  font-family: var(--fz-font);
}

.quick-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.quick-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quick-nav li {
  margin: 0;
}

/* Link molto leggeri, niente pillolone pieno */
.quick-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: rgba(15,23,42,0.75);
  text-decoration: none;
  padding: 2px 0;
  background: transparent;
  box-shadow: none;
  border-radius: 999px;
  transition:
    color .18s var(--fz-ease2),
    transform .18s var(--fz-ease2),
    opacity .18s var(--fz-ease2);
  opacity: 0.8;
}

/* Pallino */
.quick-nav a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.9);
  background: #ffffff;
  flex-shrink: 0;
  transition:
    background .18s var(--fz-ease2),
    border-color .18s var(--fz-ease2),
    transform .18s var(--fz-ease2);
}

.quick-nav a:hover {
  opacity: 1;
  transform: translateX(-2px);
  color: var(--fz-blue-dark);
}

.quick-nav a:hover::before {
  border-color: var(--fz-green);
}

/* Stato attivo (sezione corrente) */
.quick-nav a.active {
  opacity: 1;
  font-weight: 600;
  color: var(--fz-blue-dark);
}

.quick-nav a.active::before {
  background: var(--fz-green);
  border-color: var(--fz-green);
  transform: scale(1.35);
}

/* Nascondi completamente su schermi non davvero desktop */
@media (max-width: 1199px) {
  .quick-nav {
    display: none !important;
  }
}

/* =======================================================
   DOT NAV – micro navigation premium
======================================================= */

.dot-nav {
  position: fixed;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.dot-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.dot-nav a {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,0.55);
  display: block;
  position: relative;
  transition: background .25s ease, transform .25s ease;
}

/* Hover tooltip */
.dot-nav a::after {
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translate(-100%, -50%);
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: .75rem;
  background: #fff;
  color: #1f2933;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  content: attr(data-label);
}

.dot-nav a:hover::after {
  opacity: 1;
}

/* Active section */
.dot-nav a.active {
  background: var(--fz-green);
  transform: scale(1.4);
}

/* Tooltip labels */
.dot-nav a[href="#studio"]::after   { content: "Studio"; }
.dot-nav a[href="#filosofia"]::after{ content: "Filosofia"; }
.dot-nav a[href="#servizi"]::after  { content: "Servizi"; }
.dot-nav a[href="#team"]::after     { content: "Team"; }
.dot-nav a[href="#recensioni"]::after { content: "Recensioni"; }
.dot-nav a[href="#contatti"]::after { content: "Contatti"; }


/* Nascondere su mobile / tablet */
@media (max-width: 1200px) {
  .dot-nav {
    display: none !important;
  }
}

/* =======================================================
   1) HERO – MOBILE PIÙ LEGGIBILE
======================================================= */
@media (max-width: 600px) {
  .hero {
    padding: 84px 18px 56px;
  }

  .hero-title {
    font-size: 2.35rem;      /* leggermente più grande del 2.1rem attuale */
    line-height: 1.12;
  }

  .hero-lead {
    font-size: 0.98rem;
    max-width: 32rem;        /* colonna un filo più stretta = più leggibile */
    margin-top: 10px;
    margin-bottom: 22px;
    line-height: 1.7;

    text-justify: auto;
  }

  .hero-note {
    margin-top: 10px;
    font-size: 0.8rem;
  }
  
  .hero-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .hero-actions a {
      width: 100%;
      justify-content: center;
    }

    .btn-primary,
    .btn-orange-hero {
      text-align: center;
    }
	
	.hero-slides {
	    min-height: 260px;      /* prima 380px */
	  }

	  .hero-nav {
	    font-size: 1.5rem;      /* icone un po’ più piccole */
	    padding: 2px 9px;
	  }

	  .hero-caption {
	    bottom: 14px;
	    left: 14px;
	    padding: 8px 14px;
	    font-size: 0.85rem;
	  }

	  .hero-caption span {
	    font-size: 0.8rem;
	  }
}

/* =======================================================
   2) STUDIO – MOBILE STACKED PREMIUM (5 IMMAGINI)
======================================================= */
@media (max-width: 900px) {
  .studio-photos {
    gap: 12px;
  }

  .studio-top,
  .studio-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto;
  }

  .studio-photo-big,
  .studio-right,
  .studio-right .studio-photo,
  .studio-thumb {
    flex: none;
    width: 100%;
  }

  /* 5 immagini tutte con la stessa proporzione */
  .studio-photo img,
  .studio-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
  }
}

/* =======================================================
   4) CONTATTI – MOBILE / TABLET
======================================================= */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: stretch;
  }

  /* Mappa come prima card su mobile */
  .contact-map-card {
    order: -1;
  }

  .contact-main-card,
  .contact-map-card {
    padding: 14px 14px 16px;
    border-radius: 20px;
  }

  .contact-map-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .contact-map-btn {
    flex: 1 1 150px;
  }

  .contact-extra {
    grid-template-columns: 1fr;
  }
}



/* Disattivo la sticky bar su tutti i device */
.fz-sticky-mobile {
  display: none !important;
}


/* ===========================
   QUICK NAV – versione bottom (tablet + mobile)
   =========================== */

@media (max-width: 1199px) {
  #quick-nav {
    top: auto;              /* non più metà schermo */
    bottom: 80px;           /* sopra bordo inferiore */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-direction: row;    /* orizzontale */
    gap: 0;
    z-index: 9500;          /* sopra contenuti, sotto eventuali popup */
  }

  #quick-nav ul {
    flex-direction: row;
    gap: 10px;
    background: rgba(255,255,255,0.96);
    padding: 6px 14px;
    border-radius: 999px;   /* pillolina */
    box-shadow:
      0 10px 25px rgba(15,23,42,0.18),
      0 2px 6px rgba(15,23,42,0.12);
    border: 1px solid rgba(148,163,184,0.30);
  }

  #quick-nav a {
    width: 7px;
    height: 7px;
    box-shadow: none;       /* l’anello grosso lo teniamo solo su desktop */
  }

  #quick-nav a.active {
    transform: scale(1.35);
    box-shadow: 0 0 0 4px rgba(129,178,154,0.20);
  }
}


/* Stessa posizione della bolla chatbot su tutti i device */
@media (max-width: 1199px) {
  .fz-chatbot {
    inset-block-end: 26px;
    inset-inline-end: 26px;
  }
}

@media (max-width: 480px) {
  .logo-img {
    height: 44px;
  }

  .logo-title {
    font-size: 1.05rem;
  }

  .logo-subtitle-hand {
    font-size: 0.9rem;
  }
}


/* HERO – TABLET: layout in colonna */
@media (max-width: 992px) {
  .hero {
    flex-direction: column;
    align-items: stretch;          /* il contenitore prende tutta la larghezza */
    padding: 84px 20px 56px;
    gap: 28px;
  }

  /* blocco testo centrato e più largo */
  .hero-left {
    max-width: 720px;             /* puoi portarlo a 760–780 se lo vuoi ancora più largo */
    margin: 0 auto;               /* centrato orizzontalmente */
  }

  /* il paragrafo non è più limitato a 520px su tablet */
  .hero-lead {
    max-width: 100%;
  }

  .hero-carousel {
    width: 100%;
    max-width: 520px;
    margin: 10px auto 0;
    box-shadow:
      0 18px 40px rgba(0,0,0,0.30);
  }
}


@media (min-width: 900px) {
  .hero-dots .dot {
    width: 11px;
    height: 11px;
    background: rgba(255,255,255,0.55);
  }

  .hero-dots .dot.is-active {
    transform: scale(1.35);
  }
}

@media (max-width: 900px) {
  .hero-carousel {
    box-shadow:
      0 18px 40px rgba(0,0,0,0.28);
    border-radius: 20px;
    margin-top: 26px;
  }
}

/* STUDIO – MOBILE: griglia compatta 1 grande + 4 piccole */
@media (max-width: 700px) {

  .studio-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* “Spezzo” i wrapper per usare la griglia sui singoli elementi */
  .studio-top,
  .studio-bottom {
    display: contents; /* i figli entrano direttamente nella grid */
  }

  /* Foto grande in alto che occupa tutta la riga */
  .studio-photo-big {
    grid-column: 1 / -1;
  }

  /* Tutte le altre foto hanno stessa logica */
  .studio-photo,
  .studio-thumb,
  .studio-right {
    width: 100%;
    height: auto;
  }

  /* Imposto io la proporzione per tutte le immagini */
  .studio-photo img,
  .studio-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
  }
}


@media (max-width: 900px) {
  #studio .section-text {
    margin-bottom: 24px;
  }
}

.studio-photo img,
.studio-thumb img {
  display: block;
}

@media (min-width: 900px) {
  .studio-photo {
    transition: transform .35s var(--fz-ease2), box-shadow .35s var(--fz-ease2);
  }
  .studio-photo:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0,0,0,0.22);
  }
}

/* Lightbox – X con stesso stile delle altre popup */
.lightbox-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(70,109,134,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  font-size: 1.2rem;
  line-height: 1;
  color: var(--fz-blue-dark);

  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transition: .25s ease;
}

.lightbox-close:hover {
  background: #ffffff;
  transform: scale(1.07);
}

/* Allineamento globale immagini "premium" (studio, filosofia, hero) */

.hero-carousel-inner img,
.studio-photo img,
.studio-thumb img,
.philosophy-media-inner img {
  border-radius: 18px;
  object-fit: cover;
}

/* PATCH – separazione Quick Nav vs Chatbot su desktop */
@media (min-width: 1200px) {
  #quick-nav {
    z-index: 8000; /* sotto al chatbot (9000), ma sopra al resto del sito */
  }
}

/* ============================================
   STUDIO – RESPONSIVE FOTO (TABLET / MOBILE)
============================================ */

/* Tablet & mobile: testo sopra, foto sotto */
@media (max-width: 1024px) {
  .studio-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* Foto studio: 1 grande + 4 in griglia 2×2 */
@media (max-width: 900px) {

  .studio-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }

  /* I wrapper interni diventano "trasparenti" nella grid */
  .studio-top,
  .studio-right,
  .studio-bottom {
    display: contents;
  }

  /* Foto grande in alto: occupa l'intera riga */
  .studio-photo-big {
    grid-column: 1 / -1;
  }

  /* Tutte le immagini con stesso ratio e stile */
  .studio-photo img,
  .studio-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
  }
}

/* ===============================
   STUDIO – frase handwritten
=============================== */

.studio-hand {
  display: block;
  width: 100%;
  text-align: center !important;
  margin-top: 28px;        /* un filo più aria rispetto al testo/pillole */
  font-family: var(--fz-font-hand);
  font-size: 1.4rem;
  color: var(--fz-orange);
  text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}



/* ===============================
   REVEAL – fade-up globale
=============================== */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s var(--fz-ease2), transform .7s var(--fz-ease2);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===============================
   STUDIO – titolo
=============================== */

#studio .section-title {
  margin-bottom: 22px;
}

/* ===============================
   STUDIO – griglia foto mobile/tablet
=============================== */

/* Tablet: testo sopra, foto sotto (una colonna) */
@media (max-width: 1024px) {
  .studio-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* Mobile: 1 foto grande + 4 in griglia 2×2 */
@media (max-width: 900px) {

  .studio-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .studio-top,
  .studio-bottom {
    display: contents;     /* i figli entrano direttamente nella grid */
  }

  .studio-photo-big {
    grid-column: 1 / -1;   /* prima riga tutta per lei */
  }

  .studio-photo img,
  .studio-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--fz-radius-xl);
  }
}

/* ===========================================
   STUDIO – Micro-tweak Desktop Premium
=========================================== */

@media (min-width: 1025px) {

  /* Spazio più elegante tra testo e foto */
  .studio-grid {
    gap: 80px; /* prima era più stretto → ora respiro premium */
    align-items: center; /* centra verticalmente testo e foto */
  }

  /* Colonna testo più leggibile e premium */
  .studio-content {
    max-width: 540px;  /* controlla la larghezza come nei servizi/team */
  }

  /* Colonna foto leggermente più compatta per equilibrio visivo */
  .studio-photos {
    max-width: 600px;
    margin-left: auto;
  }
}

/* =======================================================
   UNIFORMARE STILE SEZIONI
   (titolo + testo + frase hand finale)
======================================================= */

/* 1) Titoli sezione: stesso respiro ovunque */
.section-title {
  font-size: 2.35rem;
  font-weight: 700;
  color: var(--fz-blue-dark);
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0 0 22px; /* 👈 prima 14px: ora più aria per tutte le sezioni */
  display: block;
}

/* 2) Frasi hand finali delle sezioni – stile unico */
.studio-hand,
.services-hand,
.philosophy-hand,
.faq-hand {
  display: block;
  width: 100%;
  margin-top: 28px;
  text-align: center;              /* 👈 tutte centrate come LO STUDIO */
  font-family: var(--fz-font-hand);
  font-size: 1.4rem;
  color: var(--fz-orange);
  text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Leggero tweak mobile */
@media (max-width: 600px) {
  .studio-hand,
  .services-hand,
  .philosophy-hand,
  .faq-hand {
    font-size: 1.3rem;
  }
}


/* ===========================================
   UNIFORME HANDWRITTEN TRA TUTTE LE SEZIONI
   (sempre allineate alla colonna di testo)
=========================================== */

#studio .studio-hand,
#servizi .services-hand,
#filosofia .philosophy-hand,
#faq .faq-hand {
  text-align: left !important;
  max-width: 640px;
  margin-left: 0;
  margin-right: auto;
}

.hand-pill {
  display: inline-block;
  padding: 8px 18px;
  margin: 6px 0 20px;
  border-radius: 14px;
  background: var(--fz-blue);
  color: #fff;
  font-family: var(--fz-font-hand);
  font-size: 1.26rem;
  line-height: 1.4;
  letter-spacing: 0.3px;
}



.hand-icon {
  position: relative;
  margin: 6px 0 18px;
  font-family: var(--fz-font-hand);
  font-size: 1.32rem;
  color: var(--fz-orange);
  padding-left: 24px;
}

.hand-icon::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.1rem;
  color: var(--fz-green);
  opacity: 0.85;
}

.hand-divider {
  margin: 10px 0 22px;
  padding-top: 12px;
  border-top: 1.5px solid rgba(129,178,154,0.45); /* verde FZ soft */
  font-family: var(--fz-font-hand);
  font-size: 1.4rem;
  color: var(--fz-orange);
}

/* =======================================================
   TIPOGRAFIA SERVIZI — TITOLI E TESTI
   (desktop / tablet / mobile)
======================================================= */

/* Etichetta sopra al titolo (PREVENZIONE & IGIENE, CONSERVATIVA...) */
.service-label {
  font-size: 0.82rem;        /* leggermente più piccolo (era più grande) */
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  opacity: 0.95;
}

/* Titolo (es: “Partiamo dalle basi giuste”) */
.service-title {
  font-size: 1.28rem;        /* prima troppo grande su mobile */
  line-height: 1.24;
  margin-bottom: 8px;        /* più aria tra titolo e testo */
  font-weight: 700;
  color: var(--fz-blue-dark);
}

/* Testo sotto il titolo */
.service-text {
  font-size: 1.02rem;        /* leggero miglioramento per leggibilità */
  line-height: 1.55;
  color: #2f3a45;
  opacity: 0.92;
}


/* =============================
   MEDIA QUERIES
============================= */

/* Desktop largo (d > 1280px) */
@media (min-width: 1280px) {
  .service-title {
    font-size: 1.34rem;     /* cresce leggermente, premium */
  }
  .service-text {
    font-size: 1.08rem;
  }
}

/* Tablet (600px – 1024px) */
@media (max-width: 1024px) {
  .service-title {
    font-size: 1.22rem;
  }
  .service-text {
    font-size: 1.0rem;
  }
}

/* Mobile < 600px */
@media (max-width: 600px) {
  .service-title {
    font-size: 1.18rem;
  }
  .service-text {
    font-size: 0.97rem;
  }
}


.service-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s var(--fz-ease2), transform .45s var(--fz-ease2);
}

.service-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.service-title {
  font-size: 1.15rem;
}

.service-media {
  border: 2px solid rgba(70,109,134,0.45); /* da .35 → più definita */
  box-shadow:
    0 6px 15px rgba(70,109,134,0.22),
    inset 0 1px 2px rgba(255,255,255,0.95);
}

@media (max-width: 600px) {
  .services-list {
    gap: 28px; /* da 24 */
  }
}

/* 🔒 Impedisce alla finestra chatbot di crescere oltre lo schermo */
.fz-chatbot-window {
  max-height: calc(100vh - 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* 🔄 Rendi scrollabile SOLO l'area messaggi */
.fz-chatbot-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important; /* ESSENZIALE: permette al flex container di ridursi */
  overflow-y: auto !important;
}

/* 🔧 Quick buttons sempre dentro il container, senza allungare la finestra */
.fz-chatbot-quick {
  flex-shrink: 0 !important;
  overflow: visible;
}

/* 🔝 Header sempre visibile, mai schiacciato fuori */
.fz-chatbot-header {
  flex-shrink: 0 !important;
}

/* CHATBOT – blocco definitivo altezza fissa in viewport */
.fz-chatbot-window {
  position: fixed !important;
  right: 26px !important;

  /* vincolo tra top e bottom → altezza auto ma SEMPRE nel viewport */
  top: 20px !important;
  bottom: 96px !important;

  width: 360px !important;
  max-width: calc(100vw - 32px) !important;

  height: auto !important;
  max-height: none !important;

  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;

  background: var(--fz-card-bg, #ffffff);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.22);
}


/* Corpo chat: occupa tutto lo spazio disponibile tra header e footer */
.fz-chatbot-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Messaggi: unica area scrollabile */
.fz-chatbot-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
}

/* Header e quick button non si schiacciano mai */
.fz-chatbot-header,
.fz-chatbot-quick,
.fz-chatbot-footer {
  flex-shrink: 0 !important;
}

@media (max-width: 600px) {
  .fz-chatbot-window {
    left: 10px !important;
    right: 10px !important;
    top: 16px !important;
    bottom: 80px !important;
    width: auto !important;
  }
}

.service-more {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--fz-blue);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
}
.service-more:hover {
  text-decoration: underline;
}

/* Migliore leggibilità del testo */
.service-text {
  line-height: 1.45;

}

/* Testi più equilibrati su mobile */
@media (max-width: 600px) {
  .service-text {
    font-size: 0.95rem;
    line-height: 1.42;
  }

  .service-title {
    font-size: 1.15rem;
    line-height: 1.25;
  }
}



@media (max-width: 768px) {
  .service-item {
    padding: 28px 22px;
  }
}



.services-search-wrap {
  margin: 0 auto 32px;
  max-width: 480px;
}

#services-search {
  width: 100%;
  padding: 12px 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e5e8eb;
  font-size: 1rem;
  transition: .25s ease;
}

#services-search:focus {
  outline: none;
  border-color: #81b29a;
  box-shadow: 0 0 0 3px rgba(129,178,154,0.25);
}

/* ================================
   SEARCH SERVIZI — STILE IDENTICO ALLA FAQ
   ================================ */
.services-search {
  margin: 32px auto 40px;
  max-width: 480px;
}

.services-search-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #4a5568;
  display: block;
  margin-bottom: 8px;
}

.services-search-field {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e5e8eb;
  border-radius: 14px;
  padding: 10px 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.services-search-field:focus-within {
  border-color: #81b29a;
  box-shadow: 0 0 0 3px rgba(129,178,154,0.25);
}

.services-search-icon {
  margin-right: 10px;
  opacity: 0.7;
  font-size: 1.1rem;
}

#services-search-input {
  width: 100%;
  border: none;
  font-size: 1rem;
  background: transparent;
}

#services-search-input:focus {
  outline: none;
}

.services-search-hint {
  margin-top: 8px;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* FILOSOFIA – SOLO LAYOUT, LA FOTO USA LO STILE DELLO STUDIO */

#filosofia {
  padding-block: 5rem;
}

.philosophy-grid-img {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 4rem;
  align-items: center;
}

.philosophy-content {
  max-width: 640px;
}

.philosophy-media {
  justify-self: center;
}

/* Tablet: foto sopra, testo sotto ma stessa card dello studio */
@media (max-width: 992px) {


  .philosophy-grid-img {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }

  .philosophy-media {
    /* niente order */
    max-width: 420px;
    margin-inline: auto;
  }

  .philosophy-content {
    max-width: 640px;
    margin-inline: auto;
  }
}


.philosophy-keyword-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;      /* 👈 più piccolo */
  padding: 0.3rem 0.7rem;  /* 👈 pill più compatta */
  border-radius: 999px;
  background: rgba(70, 109, 134, 0.06);
  border: 1px solid rgba(70, 109, 134, 0.16);
  line-height: 1.3;
}

.pill-icon {
  font-size: 0.85rem;      /* icona leggermente ridotta */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Se vuoi ancora più piccoli solo su mobile: */
@media (max-width: 640px) {
  .philosophy-keyword-pill {
    font-size: 0.74rem;
    padding: 0.25rem 0.6rem;
    gap: 0.25rem;
  }

  .pill-icon {
    font-size: 0.8rem;
  }
}


.philosophy-photo-wrapper {
  position: relative;
}

/* Overlay in alto, leggero, con gradient per leggibilità del testo */
.philosophy-photo-caption {
  position: absolute;
  inset: 0;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(11, 23, 32, 0.45),
    transparent 55%
  );
}

.caption-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #f6f6f6;
  margin: 0 0 0.3rem;
}

.caption-sub {
  font-size: 0.9rem;
  max-width: 260px;
  color: #f6f6f6;
  opacity: 0.9;
  margin: 0;
}

/* Mobile: caption più piccola per non coprire troppo la foto */
@media (max-width: 640px) {
  .philosophy-photo-caption {
    padding: 0.9rem 1rem;
  }

  .caption-title {
    font-size: 0.75rem;
  }

  .caption-sub {
    font-size: 0.8rem;
    max-width: 220px;
  }
}

.philosophy-photo-wrapper {
  position: relative;
}

/* Overlay in alto, sopra la foto */
.philosophy-photo-caption {
  position: absolute;
  inset: 0;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(11, 23, 32, 0.45),
    transparent 55%
  );
  z-index: 2; /* 👈 mette la caption sopra alla foto */
}

/* assicuriamoci che il bottone/foto stia sotto */
.philosophy-photo-wrapper .studio-photo {
  position: relative;
  z-index: 1;
}

/* Pill “filosofia / studio” – dimensioni compatte con icona */

.philosophy-keywords-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 10px;
}

.philosophy-keyword-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.30rem 0.7rem;
  border-radius: 999px;
  background: #f4f7fb;
  border: 1px solid rgba(70,109,134,0.16);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fz-blue-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    transform .18s var(--fz-ease2),
    box-shadow .18s var(--fz-ease2),
    background .18s var(--fz-ease2),
    color .18s var(--fz-ease2),
    border-color .18s var(--fz-ease2);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}


.pill-icon {
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile: ancora un filo più piccole */
@media (max-width: 600px) {
  .philosophy-keywords-bar {
    gap: 6px;
  }

  .philosophy-keyword-pill {
    font-size: 0.74rem;
    padding: 0.25rem 0.6rem;
  }
}



/* --- MINI PILL SUPER PREMIUM --- */

.philosophy-keywords-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;        /* spazio orizz + vert */
  margin-top: 1.4rem;
}

.philosophy-keyword-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 14px;
  background: #f7fafb;
  border: 1px solid rgba(70, 109, 134, 0.15);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;           /* 👈 evita pill troppo larghe */
  transition: 
    background .18s var(--fz-ease2),
    border-color .18s var(--fz-ease2),
    box-shadow .18s var(--fz-ease2);
}

.pill-icon {
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
}

/* Mobile */
@media (max-width: 640px) {
  .philosophy-keywords-bar {
    gap: 8px 10px;
  }
  .philosophy-keyword-pill {
    font-size: 0.75rem;
    padding: 0.32rem 0.65rem;
    border-radius: 12px;
  }
}

/* --- PILL LOOK "MICRO CARD" --- */

.philosophy-keywords-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.5rem;
}

.philosophy-keyword-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: 18px;
  background: #eef4f7;   /* 👈 più pieno, effetto card */
  border: 1px solid rgba(70, 109, 134, 0.22);
  box-shadow: 0 3px 8px rgba(0,0,0,0.04);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.1;
  transition:
    background .18s var(--fz-ease2),
    box-shadow .18s var(--fz-ease2),
    border-color .18s var(--fz-ease2);
}


.pill-icon {
  font-size: 1rem;
  opacity: 0.95;
}

/* Mobile */
@media (max-width: 640px) {
  .philosophy-keyword-pill {
    font-size: 0.78rem;
    padding: 0.4rem 0.85rem;
    border-radius: 14px;
  }
}


/* === STUDIO + FILOSOFIA – pill 2 per riga, mini, stile card + verdino soft === */

#studio .philosophy-keywords-bar,
#filosofia .philosophy-keywords-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 per riga */
  gap: 10px 14px;
  margin-top: 18px;
}

#studio .philosophy-keyword-pill,
#filosofia .philosophy-keyword-pill {
  display: flex;
  align-items: center;
  gap: 0.35rem;

  padding: 0.4rem 0.85rem;      /* mini */
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 999px;

  /* stile card + verdino */
  background: rgba(129, 178, 154, 0.10);
  border: 1px solid rgba(129, 178, 154, 0.45);
  box-shadow:
    0 0 0 1px rgba(129,178,154,0.25),
    0 3px 10px rgba(0,0,0,0.05);

  transition:
    background .18s var(--fz-ease2),
    border-color .18s var(--fz-ease2),
    box-shadow .18s var(--fz-ease2),
    transform .18s var(--fz-ease2);
}

#studio .philosophy-keyword-pill:hover,
#filosofia .philosophy-keyword-pill:hover {
  background: rgba(129,178,154,0.18);
  border-color: rgba(129,178,154,0.65);
  box-shadow:
    0 0 0 1px rgba(129,178,154,0.35),
    0 6px 16px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

#studio .pill-icon,
#filosofia .pill-icon {
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile: pill un filo più compatte ma sempre 2 per riga */
@media (max-width: 600px) {
  #studio .philosophy-keywords-bar,
  #filosofia .philosophy-keywords-bar {
    gap: 8px 10px;
  }

  #studio .philosophy-keyword-pill,
  #filosofia .philosophy-keyword-pill {
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    border-radius: 18px;
  }

  #studio .pill-icon,
  #filosofia .pill-icon {
    font-size: 0.9rem;
  }
}


#studio h2,
#studio h3,
#studio .section-title,
#studio .handwritten {
  text-align: left !important;
}

#servizi .section-title,
#studio .section-title,
#filosofia .section-title {
  text-align: left !important;
}

/* ===========================================
   SERVIZI – colonna testo allineata a STUDIO
=========================================== */


/* Testo giustificato come Studio */
#servizi .services-intro .leadMod,
#servizi .services-intro .section-text {
  text-align: justify;
  text-justify: inter-word;
}

/* Titolo, label e pill hand restano allineati a sinistra */
#servizi .services-intro .section-title,
#servizi .services-intro .hand-pill,
#servizi .services-intro .section-label,
#servizi .services-intro .section-label-accent {
  text-align: left;
}




/* ===========================================
   FILOSOFIA – allineamenti identici a STUDIO
=========================================== */

#filosofia .philosophy-content {
  text-align: justify;           /* come .studio-content */
}

/* Titolo, label e pill handwritten restano a sinistra */
#filosofia .section-label,
#filosofia .section-label-accent,
#filosofia .hand-pill,
#filosofia .section-title {
  text-align: left !important;
}

/* Stesso respiro sotto il titolo della sezione */
#filosofia .section-title {
  margin-bottom: 22px;
}

/* Percorso: usa le card dei servizi, ma come lista ordinata semantica */
.care-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* =======================================================
   PERCORSO – allineato ai SERVIZI
======================================================= */

/* Intro percorso giustificata come Studio/Servizi */
#percorso .section-text {
  text-align: justify;
  text-justify: inter-word;
}

/* Usiamo la stessa griglia dei servizi: è già su .services-list */

/* Pallina numerata del percorso: stessa misura delle icone, ma con progressione di verde */
.care-step-media {
  /* eredita width/height/border/shadow da .service-media */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Numero scritto a mano dentro il tondino */
.care-step-number {
  font-family: var(--fz-font-hand);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--fz-blue-dark);
}

/* Progressione bianco → verde sui 4 step */
.care-step .care-step-media {
  background: linear-gradient(135deg, #f7f9fc, #eef3f8); /* come servizi */
}



@media (max-width: 900px) {
  #filosofia .philosophy-grid-img {
    grid-template-columns: 1fr;
  }
}

.care-step-number {
  display: flex !important;
  justify-content: center;
  align-items: center;
  line-height: 1 !important;
  padding-top: 1px; /* correzione ottica */
  padding-right: 3px; /* correzione ottica */
}

.care-step-icon {
  width: 92%;
  height: 92%;
  display: block;
  object-fit: contain;
}

.percorso-cta {
  margin-top: 36px;
  text-align: center;
}

.percorso-cta-text {
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: var(--fz-blue-dark);
  opacity: .9;
}

#percorso .btn-primary {
  min-width: 230px;
}


.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-with-icon .btn-icon {
  width: 18px;
  height: 18px;
  transition: transform .25s ease;
}

.btn-with-icon:hover .btn-icon {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .percorso-cta .btn-primary {
    width: 100%;
    justify-content: center; /* centra testo + icona */
    text-align: center;
  }
}

@media (max-width: 600px) {
  .percorso-cta {
    padding-inline: 4px;
  }

  .percorso-cta .btn-primary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Tablet: Studio e Filosofia con respiro simile tra le colonne */
@media (max-width: 992px) {
  #filosofia .philosophy-grid-img {
    grid-template-columns: 1fr;
    row-gap: 32px;   /* come percezione visiva simile a Studio */
  }
}

/* FILOSOFIA – rendi la foto grande quanto quella dello Studio su tablet/mobile */
@media (max-width: 992px) {
  #filosofia .philosophy-media {
    max-width: none;      /* togli il tappo dei 420px */
    width: 100%;
    margin-inline: 0;
  }

  #filosofia .philosophy-media .studio-photo {
    display: block;
    width: 100%;
  }

  #filosofia .philosophy-media .studio-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--fz-radius-xl);
  }
}

/* Lead della sezione Team – allineamento coerente con Studio/Filosofia */
.leadMod {
  text-align: justify;
  text-justify: inter-word;
}

/* HERO – fix spazio vuoto a destra su tablet */
@media (max-width: 992px) {
  .hero {
    flex-direction: column;
    align-items: stretch;   /* invece di flex-start: i figli prendono tutta la larghezza */
    padding: 84px 20px 56px;
    gap: 28px;
    min-height: auto;       /* opzionale ma consigliato */
  }

  .hero-main {
    max-width: 100%;        /* niente tappo: il blocco testo usa tutta la riga */
  }
}

@media (max-width: 992px) {
  .hero-main {
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }
}




/* ============================================
   TEAM → card identiche alle SERVICE-ITEM
   ============================================ */

/* Le card Team usano lo stile base dei servizi */
.service-item.team-item {
  background: #ffffff;
  padding: 20px 20px 20px 16px;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(70,109,134,0.12),
              0 4px 18px rgba(0,0,0,0.06);
  border-left: none; /* override del vecchio bordo laterale */
}

/* Hover identico alle card servizi */
.service-item.team-item:hover {
  background: #ffffff; /* annulla il grigino di .team-item:hover */
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* TEAM LIST: mobile/tablet = 1 colonna, desktop = 2 colonne */
.team-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 12px;
}

@media (min-width: 980px){
  .team-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}





/* ============================================
   TEAM – pill identiche a STUDIO / FILOSOFIA
   ============================================ */

#team .team-item-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 pill per riga */
  gap: 10px 14px;
  margin-top: 18px;
}

#team .team-item-tags .philosophy-keyword-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;

  /* 👇 stessi valori di Studio/Filosofia */
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(129, 178, 154, 0.10);
  border: 1px solid rgba(129, 178, 154, 0.45);
  box-shadow:
    0 0 0 1px rgba(129,178,154,0.25),
    0 3px 10px rgba(0,0,0,0.05);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fz-blue-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    background .18s var(--fz-ease2),
    border-color .18s var(--fz-ease2),
    box-shadow .18s var(--fz-ease2),
    transform .18s var(--fz-ease2);
	
 

}

#team .team-item-tags .philosophy-keyword-pill:hover {
  background: rgba(129,178,154,0.18);
  border-color: rgba(129,178,154,0.65);
  box-shadow:
    0 0 0 1px rgba(129,178,154,0.35),
    0 6px 16px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

/* icone con le tue immagini */
#team .team-item-tags .pill-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#team .team-item-tags .pill-icon img {
  width: 200%;
  height: 200%;
  object-fit: contain;
  display: block;
}

/* opzionale: su schermi molto piccoli → 1 pill per riga */
@media (max-width: 480px) {
  #team .team-item-tags {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

#team .team-item-tags .philosophy-keyword-pill{
  line-height: 1;          /* rende l’altezza identica e stabile */
}

@media (max-width: 640px){
  #team .team-item-tags .philosophy-keyword-pill{
    padding: 0.4rem 0.85rem;  /* uguale a Studio/Filosofia */
    font-size: 0.78rem;
    border-radius: 999px;
    line-height: 1;
  }
}

/* Hover cerchio foto Team = come .service-media dei Servizi/Percorso */
.service-item.team-item:hover .team-item-photo{
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(70,109,134,0.26),
    inset 0 1px 2px rgba(255,255,255,0.9);
  border-color: rgba(70,109,134,0.7);
}

#team .team-tags-label{
  margin-top: 14px;
  font-size: .75rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(40,52,73,0.55);
}

#team .team-item-tags .philosophy-keyword-pill{
  min-width: 0;              /* fondamentale dentro grid */
  overflow: hidden;
}

@media (max-width: 3000px){
  #team .team-item-tags .philosophy-keyword-pill{
    white-space: normal;     /* su tablet/mobile può andare a capo */
    line-height: 1.15;
    overflow-wrap: anywhere; /* evita “sforamenti” con parole lunghe */
  }
}

/* CTA link uguale ovunque (Servizi/Team/altre card) */
.service-more{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  margin-top: 10px;
  border-radius: 999px;
  border: 1px solid rgba(70,109,134,0.45);
  background: #ffffff;
  color: var(--fz-blue-dark);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition:
    background .22s var(--fz-ease2),
    border-color .22s var(--fz-ease2),
    color .22s var(--fz-ease2),
    transform .22s var(--fz-ease2),
    box-shadow .22s var(--fz-ease2);
}

.service-more:hover{
  background: var(--fz-blue);
  color: #fff;
  border-color: var(--fz-blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

/* ============================================
   CTA link sulle card (Servizi / Team / ecc.)
   Unifica look&feel con .member-bio-btn
============================================ */

/* base "button-like" per link dentro le card */
.service-more{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  /* stessi valori chiave di .member-bio-btn */
  padding: 7px 14px;
  margin-top: 10px;
  border-radius: 999px;
  border: 1px solid rgba(70,109,134,0.45);
  background: #ffffff;
  color: var(--fz-blue-dark);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;          /* 👈 elimina “altezza” diversa */
  text-decoration: none;   /* 👈 elimina underline */
  cursor: pointer;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition:
    background .22s var(--fz-ease2),
    border-color .22s var(--fz-ease2),
    color .22s var(--fz-ease2),
    transform .22s var(--fz-ease2),
    box-shadow .22s var(--fz-ease2);
}

/* anti-underline anche in hover/focus */
.service-more:hover,
.service-more:focus{
  text-decoration: none;
}

.service-more:hover{
  background: var(--fz-blue);
  color: #ffffff;
  border-color: var(--fz-blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}



.team-group-icon {
  font-size: 0.9rem;
  margin-right: 6px;
  opacity: 0.75;
}


.team-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  flex-shrink: 0;
}

.team-group-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Tabs: allineamento icona + testo */
.team-tab{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1; /* evita disallineamenti verticali */
}

/* contenitore icona */
.team-group-icon{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  overflow: hidden; /* se l'icona "esce" */
}

/* immagine icona */
.team-group-icon img{
  display: block;
  width: 165%;          /* 👈 come fai nelle pill: compensa canvas grande */
  height: 165%;
  object-fit: contain;
  background: transparent; /* non crea sfondi: se lo vedi è nel PNG */
  transform: translateY(1px); /* micro-centering ottico */
}

/* Stato attivo base */
.team-tab.active {
  color: var(--fz-blue-dark);
}

/* MEDICA → arancione */
.team-tab--medica.active {
  border-bottom-color: var(--fz-orange);
}

/* ASSISTENZA → verde */
.team-tab--assistente.active {
  border-bottom-color: var(--fz-green);
}

/* SEGRETERIA → blu */
.team-tab--segreteria.active {
  border-bottom-color: var(--fz-blue);
}

.team-tab {
  border-bottom: 2px solid transparent;
}

.team-tab:hover {
  color: var(--fz-blue-dark);
}

.team-tab--medica:hover {
  border-bottom-color: rgba(251,133,0,0.35);
}

.team-tab--assistente:hover {
  border-bottom-color: rgba(129,178,154,0.35);
}

.team-tab--segreteria:hover {
  border-bottom-color: rgba(70,109,134,0.35);
}






/* ===== TEAM: header medico (foto + nome/ruolo affiancati) ===== */
.team-item--medico .team-item-head{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px; /* compatta la card */
}

.team-item--medico .team-item-info{
  min-width: 0; /* fondamentale per evitare overflow */
}

.team-item--medico .team-item-name{
  margin-bottom: 4px; /* già simile a come lo hai */
}

.team-item--medico .team-item-role{
  margin-top: 0;
}

/* Quando il layout è stretto, torna in colonna (come ora) */
@media (max-width: 700px){
  .team-item--medico .team-item-head{
    align-items: flex-start;
    gap: 12px;
  }
}

.team-item--medico .team-item-role{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Header card medico: sempre affiancato */
.team-item--medico .team-item-head{
  display: flex;
  align-items: center; /* 🔑 questo è il punto */
  gap: 16px;
}

/* blocco nome + ruoli */
.team-item--medico .team-item-info{
  display: flex;
  flex-direction: column;
  justify-content: center; /* 🔑 centra verticalmente rispetto alla foto */
}

/* mobile: STESSO layout desktop */
@media (max-width: 700px){
  .team-item--medico .team-item-head{
    align-items: center;      /* NON flex-start */
  }

  .team-item--medico .team-item-info{
    justify-content: center;  /* rinforzo */
  }
}

.team-item--medico .team-item-role{
  line-height: 1.35;
}



/* ===== TEAM: staff directory card ===== */
.team-item--staff{
  padding: 18px 22px; /* più compatta della card medico */
}

.team-item--staff .team-dir{
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Foto: stessa estetica dei dottori ma più “directory” */
.team-item--staff .team-dir-photo{
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  border-radius: 50%;
  overflow: hidden;

  /* se già hai ring/ombra sulla foto dei dottori, puoi toglierlo qui
     oppure replicarlo: */
  border: 3px solid rgba(70,109,134,.45);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.team-item--staff .team-dir-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-item--staff .team-dir-main{
  min-width: 0;
}

.team-item--staff .team-dir-name{
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--fz-text, #1f2a37);
  line-height: 1.15;
  margin: 0 0 6px 0;
}

.team-item--staff .team-dir-role{
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

/* colori ruolo (agganciali ai tuoi colori reali) */
.team-item--staff .role--igiene{ color: var(--fz-orange, #fb8500); }
.team-item--staff .role--assistenza{ color: var(--fz-green, #81b29a); }
.team-item--staff .role--segreteria{ color: var(--fz-blue, #466d86); }

/* Mobile: resta directory (non “vuota”), solo più compatta */
@media (max-width: 520px){
  .team-item--staff{ padding: 16px 18px; }
  .team-item--staff .team-dir-photo{
    width: 78px;
    height: 78px;
    flex-basis: 78px;
  }
  .team-item--staff .team-dir-name{ font-size: 1.16rem; }
}








/* ============================================
   FLAT MODE — riduce 3D su TUTTE le card
   (sito intero: Servizi, Percorso, Team, ecc.)
   ============================================ */

.service-item,
.service-item.team-item {
  box-shadow: 0 0 0 1px rgba(70,109,134,0.12),
              0 6px 18px rgba(0,0,0,0.05);
}

/* hover molto più soft */
.service-item:hover,
.service-item.team-item:hover {
  transform: none;
  box-shadow: 0 0 0 1px rgba(70,109,134,0.16),
              0 10px 24px rgba(0,0,0,0.07);
}


.service-item:hover,
.service-item.team-item:hover { box-shadow: 0 0 0 1px rgba(70,109,134,0.16); }



/* ============================================
   TEAM — header a 2 colonne per TUTTE le card
   (risolve “card vuote” senza aggiungere contenuti)
   ============================================ */

.service-item.team-item .team-head{
  display: grid;
  grid-template-columns: 112px 1fr; /* 112 è già la tua foto */
  gap: 18px;
  align-items: center;              /* centra verticalmente testo rispetto foto */
}

/* il blocco testo non deve andare a capo male */
.service-item.team-item .team-head-text{
  min-width: 0;
}

/* mobile: resta a 2 colonne ma più compatto e sempre centrato */
@media (max-width: 560px){
  .service-item.team-item .team-head{
    grid-template-columns: 96px 1fr;
    gap: 14px;
  }
}

















/* =========================================================
   TEAM – header centrato + foto leggermente più piccola
   + responsive anti-schiacciamento + decorazioni premium
   (INCALA IN FONDO AL CSS)
========================================================= */

#team .service-item.team-item{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;     /* centra foto + header */
  text-align: center;      /* centra nome/ruolo */
  overflow: hidden;
}

/* Foto più piccola ma sempre "rigida" (mai schiacciata) */
#team .team-item-photo{
  width: 96px;
  height: 96px;
  flex: 0 0 auto;          /* 👈 evita shrink */
  margin: 2px auto 12px;   /* centrata */
}

/* Mobile ancora leggermente più compatta */
@media (max-width: 700px){
  #team .team-item-photo{
    width: 88px;
    height: 88px;
  }
}

/* Nome e ruolo centrati + con larghezza piena */
#team .team-item-name,
#team .team-item-role{
  width: 100%;
  text-align: center;
}

/* Ruolo più “pulito” su più righe (no foto schiacciata per farci stare tutto) */
#team .team-item-role{
  line-height: 1.25;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* Se vuoi: nome leggermente più “importante” */
#team .team-item-name{
  font-size: 1.08rem;
  font-weight: 650;
}

/* Snippet: centrato (premium) e con larghezza controllata */
#team .team-item-snippet{

  margin: 10px auto 0;
  text-align: justify;
}

/* Pills: mantieni la tua grid ma evita che “schiaccino” layout */
#team .team-item-tags{
  width: 100%;
}

/* ---------------------------
   Decorazioni coerenti con FZ
---------------------------- */

/* Corner soft (finto “pattern” in basso a destra) */

/* Linea separatrice “header → contenuto” (sempre elegante anche sulle card light) */
#team .team-item-role{
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 10px;
}

#team .team-item-role::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 74px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    rgba(129,178,154,0.0),
    rgba(129,178,154,0.65),
    rgba(251,133,0,0.55),
    rgba(129,178,154,0.0)
  );
  opacity: .9;
}

/* Opzionale: leggero “glow” in hover senza 3D */
#team .service-item.team-item:hover::after{
  opacity: 1;
}

/* Tablet/mobile: evita compressioni e migliora respiro */
@media (max-width: 980px){
  #team .service-item.team-item{
    padding-top: 18px;
  }
}


#team .team-item-role::after{
  content: none;
}

/* divisore SOLO per area medica (dottori) */
#team .team-item--medico .team-item-role::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 72px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(251, 133, 0, 0.75),
    transparent
  );
}

/* base neutra: niente spazio sotto il ruolo */
#team .team-item-role{
  padding-bottom: 0;
  margin-bottom: 0;
}



/* spazio + divisore solo per area medica */
#team .team-item--medico .team-item-role{
  padding-bottom: 12px;
  margin-bottom: 10px;
}


/* pill dottori: testo puro, centrato */
#team .team-item--medico .team-item-tags{
  justify-content: center;
}

#team .team-item--medico .team-item-tags img,
#team .team-item--medico .team-item-tags .icon{
  display: none;
}


/* ============================================
   TEAM – FIX pill: centrate + stessa taglia Studio/Filosofia
   (metti QUESTO BLOCCO IN FONDO al file)
============================================ */

/* Pill team: stessa “taglia” delle pill mini (Studio/Filosofia) + testo centrato */
#team .team-item-tags .philosophy-keyword-pill{
  justify-content: center;
  text-align: center;

  /* taglia coerente */
  padding: 0.35rem 0.70rem !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
  border-radius: 18px !important;
}

/* Mobile: ancora un filo più compatte (come il pattern che hai già per le pill mini) */
@media (max-width: 640px){
  #team .team-item-tags .philosophy-keyword-pill{
    padding: 0.32rem 0.65rem !important;
    font-size: 0.74rem !important;
    border-radius: 14px !important;
  }
}

/* Se sulle pill dei dottori NON vuoi icone: togli icona e anche lo “spazio” (gap) */
#team .team-item--medico .team-item-tags .pill-icon{
  display: none !important;
}
#team .team-item--medico .team-item-tags .philosophy-keyword-pill{
  gap: 0 !important;
}







/* SERVIZI + PERCORSO → contenuto centrato come card team */
#servizi .service-item,
#percorso .service-item,
#recensioni .service-item {
  text-align: center;
}

#servizi .service-media,
#percorso .service-media,
#recensioni .service-media  {
  display: flex;
  justify-content: center;
}

#servizi .service-title::after,
#percorso .service-title::after,
#recensioni .service-title::after  {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 12px auto 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(251,133,0,.6),
    transparent
  );
}

#servizi .service-text,
#percorso .service-text,
#recensioni .service-text {
  text-align: justify;

  margin: 12px auto 0;
}

#servizi .service-more {
  display: inline-block;
  margin-top: 14px;
}

/* PERCORSO: centra la "pallina" (override del margin-left:-4px dei servizi) */
#percorso .care-step-media {
  margin-left: auto !important;
  margin-right: auto !important;
}

#percorso .care-step .service-media {
  margin-left: auto !important;
  margin-right: auto !important;
}


.service-label {
  font-size: 1.05rem;
  font-weight: 650;
  margin-bottom: 4px;
  color: var(--fz-blue-dark);
  width: 100%;
  text-align: center;
  text-transform: none;
}


.service-title {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--fz-orange);
}


/* =======================================================
   SERVIZI + PERCORSO: stessa "disposizione griglia" del TEAM
   - mobile/tablet: 1 colonna
   - desktop: 2 colonne
======================================================= */

#servizi .services-list,
#percorso .services-list,
#recensioni .services-list{
  grid-template-columns: 1fr; /* 1 colonna */
  gap: 28px;                  /* come team */
  margin-top: 12px;           /* come team */
}

@media (min-width: 980px){
  #servizi .services-list,
  #percorso .services-list,
  #recensioni .services-list{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colonne */
  }
}

#servizi .service-item,
#percorso .service-item,
#recensioni .service-item {
  align-items: center;
}

#servizi .service-media,
#percorso .service-media,
#recensioni .service-media {
  margin-left: auto !important;
  margin-right: auto !important;
}




/* =========================================
   TEAM TABS – compattare icona + testo (fix definitivo)
   Incolla in fondo al file così sovrascrive i doppioni
========================================= */

/* barra tab: usa tutta la larghezza e distribuisce i 3 tab */
#team .team-tabs{
  display: flex;                 /* override inline-flex */
  width: 100%;
  justify-content: space-between;
  gap: 10px;                     /* meno spazio tra tab */
  margin: 18px 0 10px;           /* meno aria sopra/sotto */
}

/* singolo tab: compatto e centrato */
#team .team-tab{
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;                      /* 👈 spazio reale tra icona e testo */
  padding: 0 0 9px;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;           /* evita "Area / medica" a capo */
}

/* icona: niente margini laterali duplicati */
#team .team-group-icon{
  margin-right: 0 !important;    /* 👈 elimina il doppio spacing */
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  opacity: .85;
}

/* immagine: niente overscale eccessivo (riduce anche “aria” percepita) */
#team .team-group-icon img{
  width: 100%;
  height: 100%;
  transform: none;
}

/* su schermi stretti: consenti 2 righe SOLO per la tab lunga */
@media (max-width: 520px){
  #team .team-tabs{
    gap: 8px;
    font-size: .82rem;
  }

  #team .team-tab{
    white-space: normal;         /* ok andare a capo se serve */
    gap: 6px;
  }

  /* forza solo la tab lunga a spezzare bene (non “parole spezzate male”) */
  #team .team-tab--assistente{
    line-height: 1.05;
  }
}












/* ===============================
   BIO POPUP – pill 2 per riga
================================ */

/* Desktop & tablet */
.team-bio-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Mobile */
@media (max-width: 600px) {
  .team-bio-highlights {
    grid-template-columns: 1fr;
  }
}


/* ======================================
   RECENSIONI – identiche al PERCORSO
====================================== */

.reviews-list .service-item {
  text-align: left;
}

/* Icona / tondino – IDENTICO al percorso */
.reviews-list .service-media {
  width: 64px;
  height: 64px;
  margin-left: -4px;
}

/* Icona DENTRO il tondino (non esce più) */
.reviews-list .service-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Titolo */
.reviews-list .service-title {
  margin-top: 2px;
  margin-bottom: 4px;
}

/* Sottotitolo arancione */
.reviews-list .service-label {
  margin-top: 0;
  margin-bottom: 6px;
}

/* DIVIDER arancione (mancava) */
.reviews-list .service-label::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: var(--fz-orange);
  border-radius: 999px;
  margin-top: 6px;
}

/* Testo recensione */
.reviews-list .service-text,
.reviews-list .review-text {
  text-align: justify;
  text-justify: inter-word;
  color: var(--fz-blue-dark);
}








/* ===========================
   RECENSIONI – match PERCORSO
   (incolla in fondo al CSS)
=========================== */

#recensioni .service-item.rev{
  text-align: center;
}

/* tondino come nel percorso */
#recensioni .service-media.care-step-media{
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 2px solid rgba(70,109,134,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;         /* IMPORTANTISSIMO: l’icona non “rompe” il cerchio */
  margin: 0 auto 14px;
}

/* l’icona deve riempire il tondino (senza uscire) */
#recensioni .service-media.care-step-media .care-step-icon{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.08);   /* leggero “wow” senza tagliarla */
  display: block;
}

/* titolo grande (blu) */
#recensioni .service-label{
  display: block;
  margin: 0;
}

/* sottotitolo arancione + divider sotto (come percorso) */
#recensioni .service-title{
  display: block;
  margin-top: 8px;          /* controlla lo “spazio tra blu e arancione” */
}

/* linea separatrice sotto l’arancione */
#recensioni .service-title::after{
  content:"";
  display:block;
  width: 46px;
  height: 2px;
  background: rgba(251,133,0,.35);
  border-radius: 99px;
  margin: 12px auto 0;
}

/* testo recensione justify */
#recensioni .service-text{
  text-align: justify;
  text-justify: inter-word;
}



/* ==============================
   RECENSIONI — reset layout card
   (override definitivo)
============================== */

#recensioni .service-item.rev{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* Il tondino deve comportarsi come nel percorso */
#recensioni .service-item.rev .service-media{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 10px !important;
}

/* icona piena nel tondino, senza “romperlo” */
#recensioni .service-item.rev .service-media img{
  width: 92%;
  height: 92%;
  object-fit: contain;
}




/* testo: blu, justify, come card percorso */
#recensioni .service-item.rev .service-text{
  margin-top: 14px;
  text-align: justify;
  text-justify: inter-word;
  color: var(--fz-blue-dark);
}


/* ==============================
   RECENSIONI = IDENTICHE A PERCORSO
   (incolla in fondo al CSS)
============================== */

/* disattiva vecchio layout (se rimane qualche regola in giro) */
#recensioni .reviews,
#recensioni .review,
#recensioni .review-badge,
#recensioni .stars,
#recensioni .review-text,
#recensioni .review-name {
  all: unset;
}

/* assicurati che usi la stessa “griglia” del Percorso */
#recensioni .reviews-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}

/* card identica al Percorso */
#recensioni .reviews-list .service-item.rev{
  text-align: center;
}



/* titolo (blu scuro) = come Percorso: span.service-label */
#recensioni .reviews-list .service-label{
  display: block;
  margin: 0;
  color: var(--fz-blue-dark);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* IMPORTANTISSIMO: evita la “seconda” lineetta */
#recensioni .reviews-list .service-label::after{
  content: none !important;
  display: none !important;
}

/* sottotitolo (arancione) = come Percorso: h3.service-title + la sua lineetta */
#recensioni .reviews-list .service-title{
  margin: 10px 0 0;
  color: var(--fz-orange);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
}

/* testo recensione = justify identico */
#recensioni .reviews-list .service-text{
  text-align: justify;
  text-justify: inter-word;
}



/* ==============================
   RECENSIONI = IDENTICHE A PERCORSO
   (incolla in fondo al CSS)
============================== */

/* Usa esattamente la stessa impostazione “card percorso” (colonna + centro) */
#recensioni .reviews-list .service-item.rev{
  text-align: center;
}

/* Tondino: stessa logica del percorso + icona dentro al cerchio */
#recensioni .reviews-list .service-media.care-step-media{
  overflow: hidden;
}

#recensioni .reviews-list .care-step-icon{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* SWAP corretto:
   - service-label = titolo blu (come “Fase 1 – Prima visita”)
   - service-title = sottotitolo arancione (come “ASCOLTO, ANALISI…”)
*/
#recensioni .reviews-list .service-label{
  color: var(--fz-blue-dark);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

/* IMPORTANTISSIMO: via qualsiasi divider sul titolo blu (evita doppia lineetta) */
#recensioni .reviews-list .service-label::after{
  content: none !important;
  display: none !important;
}

/* Sottotitolo arancione + UNA sola lineetta sotto */
#recensioni .reviews-list .service-title{
  color: var(--fz-orange);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: .75rem;
  font-weight: 650;
  margin-top: 10px;   /* distanza tra blu e arancione (come percorso) */
  margin-bottom: 0;
}

#recensioni .reviews-list .service-title::after{
  content:"";
  display:block;
  width:48px;
  height:2px;
  margin:12px auto 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(251,133,0,.6),
    transparent
  );
}

/* Testo: stesso comportamento del percorso */
#recensioni .reviews-list .service-text{
  margin-top: 14px;
  text-align: justify;
  text-justify: inter-word;
  color: var(--fz-blue-dark);
}











/* RECENSIONI: hover tondino come PERCORSO (fix minimo) */
#recensioni .service-item.rev:hover .service-media,
#recensioni .service-item.rev:hover .service-media.care-step-media{
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(70,109,134,0.26),
    inset 0 1px 2px rgba(255,255,255,0.9);
  border-color: rgba(70,109,134,0.7);
}

/* micro “pop” dell’icona (come feel del percorso) */
#recensioni .service-item.rev:hover .care-step-icon{
  transform: scale(1.04);
}




















/* FIX: dot perfettamente rotondi (carosello + quick-nav) */
.hero-dots .dot,
#quick-nav a {
  aspect-ratio: 1 / 1;
  border-radius: 999px !important;
  padding: 0 !important;
  line-height: 0 !important;
  box-sizing: border-box;
  flex: 0 0 auto;
  transform-origin: center;
}

.hero-dots .dot {
  display: block; /* evita comportamenti strani dei button */
}





/* Opzione FIXED (se vuoi proprio sempre sempre) */
header { position: fixed; top: 0; left: 0; right: 0;   border-bottom: 1px solid rgba(70,109,134,0.10);}
body { padding-top: 66px; } /* regola in base all’altezza reale header */



/* DISATTIVA animazione comparsa card */
.service-item,
.service-item.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* CHATBOT: toggle più visibile */
.fz-chatbot-toggle {
  width: 62px !important;
  height: 62px !important;
  font-size: 28px !important;
  opacity: 1 !important;
  transform: none !important;
  background: linear-gradient(135deg, var(--fz-blue, #466d86), #2c3b4c) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,0.28) !important;
}

/* CHATBOT: finestra più “staccata” dal fondo */
.fz-chatbot-window {
  border: 1px solid  var(--fz-blue-dark) !important;
  outline: 1px solid rgba(255,255,255,0.55);
  outline-offset: -1px;
}































/* =========================================================
   BIO DOTTORESSA – REFINEMENT SENZA CAMBIARE ALLINEAMENTI
   (override soft, stesso layout attuale)
========================================================= */

/* ---------------------------------------------------------
   NOME DOTTORESSA
   Match perfetto con card Team (stesso peso/resa)
--------------------------------------------------------- */
#team-bio-modal .team-item-name,
.team-bio-dialog .team-item-name{
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--fz-blue-dark);
  margin: 0;
}

/* ---------------------------------------------------------
   RUOLO DOTTORESSA
   Stessa resa visiva della card Team
--------------------------------------------------------- */
#team-bio-modal .team-item-role,
.team-bio-dialog .team-item-role{
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fz-orange);
  line-height: 1.25;
  margin-top: 2px;
  margin-bottom: 10px;
  position: relative;
  padding-bottom: 10px;
}

/* separatore soft sotto il ruolo (come nel team) */
#team-bio-modal .team-item-role::after,
.team-bio-dialog .team-item-role::after{
  content: "";
  position: absolute;
  left: 0;              
  bottom: 0;
  width: 68px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    rgba(251,133,0,.85),
    rgba(251,133,0,.25),
    transparent
  );
}

/* ---------------------------------------------------------
   BADGE FOUNDER
   Più “premium” ma stessa posizione
--------------------------------------------------------- */
.team-bio-founder{
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb8500, #f6ad55);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}

/* ---------------------------------------------------------
   FOTO BIO
   Solo rifinitura (nessun resize / nessun reposition)
--------------------------------------------------------- */
.team-bio-photo{
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(70,109,134,.28);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.team-bio-photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------
   TESTO BIOGRAFIA
   Migliore leggibilità, più “editoriale”
--------------------------------------------------------- */
.team-bio-content p{
  font-size: .95rem;
  line-height: 1.6;
  color: #2f3e46;
  margin-bottom: 12px;
}

/* ---------------------------------------------------------
   GRASSETTO – SOLO CONCETTI CHIAVE
   (visuale coerente con le 4 pill)
--------------------------------------------------------- */
.team-bio-content strong{
  font-weight: 650;
  color: var(--fz-blue-dark);
}

/* ---------------------------------------------------------
   CITAZIONE / HAND PILL
   Stile Filosofia ma senza cambiare posizione
--------------------------------------------------------- */



.team-bio-content .team-bio-hand{
  background:
    radial-gradient(circle at top left, rgba(251,133,0,.14), transparent 55%),
    rgba(70,109,134,.06);
}

.team-bio-content .team-bio-hand:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: transform .18s var(--fz-ease2), box-shadow .18s var(--fz-ease2);
}


/*

.team-bio-hand-modal{
  display: block;
  max-width: 720px;
  margin: 0px auto 26px;
  padding: 6px 0 14px;
  margin-top: 10px !important;
  margin-bottom: 0px !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  font-family: var(--fz-font-hand);
  font-size: clamp(1.22rem, 2.4vw, 1.58rem) !important;
  line-height: 1.18;
  color: var(--fz-orange) !important;

  position: relative;
  text-align: center !important;
  letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(251,133,0,.12);
}





.team-bio-hand-modal span{ 
  position: relative;
}

.team-bio-hand-modal{
  background-image: linear-gradient(
    90deg,
    transparent,
    rgba(251,133,0,.55),
    rgba(129,178,154,.45),
    transparent
  );
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}
*/

.team-bio-hand-modal{
    display: block;
    max-width: 720px;
    margin: 0px auto 26px;
    padding: 6px 0 14px;
    margin-top: 10px !important;
    margin-bottom: 0px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: var(--fz-font-hand);
    font-size: clamp(1.22rem, 2.4vw, 1.58rem) !important;
    line-height: 1.18;
    color: var(--fz-orange) !important;

    position: relative;
    text-align: center !important;
    letter-spacing: .01em;
    text-shadow: 0 2px 10px rgba(251,133,0,.12);
}

.team-bio-hand-modal::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 5px;
    transform: translateX(-50%);
    width: 72px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(251, 133, 0, 0.75),
      transparent
    );
}
































/* =========================
   FAQ CLASSIC PREMIUM
========================= */

.faq-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin: 16px 0 18px;
  flex-wrap:wrap;
}

.faq-kicker{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.7;
  margin-bottom:8px;
}

.faq-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* riuso pill del sito, solo tweak stati */
.faq-pill{
  cursor:pointer;
  transition: transform .18s ease, opacity .18s ease;
}
.faq-pill:hover{ transform: translateY(-1px); }
.faq-pill.is-active{
  opacity:1;
  outline: 2px solid rgba(251,133,0,.35);
  outline-offset: 2px;
}

/* search */
.faq-search{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 240px;
}
.faq-search-label{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.7;
}
#faq-search{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(70,109,134,.22);
  background: rgba(255,255,255,.9);
  outline:none;
}
#faq-search:focus{
  border-color: rgba(251,133,0,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* accordion */
.faq-accordion{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.faq-row{
  border: 1px solid rgba(70,109,134,.18);
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  overflow:hidden;
}

.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 14px;
  cursor:pointer;
  background: transparent;
  border:0;
  text-align:left;
}

.faq-badge{
  flex:0 0 auto;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.75;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(70,109,134,.18);
  background: rgba(70,109,134,.06);
}

.faq-q-text{
  font-weight:650;
  line-height:1.25;
  color: var(--fz-blue-dark);
}

.faq-icon{
  margin-left:auto;
  font-size: 20px;
  opacity:.7;
  transform: translateY(-1px);
  transition: transform .18s ease, opacity .18s ease;
}

/* answer */
.faq-a{
  display:none;
  padding: 0 14px 14px;
  opacity:.92;
}
.faq-row.is-open .faq-a{ display:block; }
.faq-row.is-open .faq-icon{
  transform: rotate(45deg);
  opacity:.9;
}

.faq-a p{ margin: 0 0 10px; }
.faq-a p:last-child{ margin-bottom:0; }

.faq-footer{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}

.faq-empty{
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed rgba(70,109,134,.28);
  background: rgba(70,109,134,.05);
  opacity:.85;
}



/* Search wrap + clear button */
.faq-search-wrap{
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.faq-search{
  position: relative;
}

#faq-search{
  padding-right: 44px; /* spazio per la X */
}

/* clear button (non dipende dal browser) */
.faq-search-clear{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(70,109,134,.22);
  background: rgba(255,255,255,.95);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  opacity: .85;
  transition: transform .18s ease, opacity .18s ease;
}
.faq-search-clear:hover{
  transform: translateY(-1px);
  opacity: 1;
}

/* stato "search disattivata" quando non sei su Tutte */
.faq-toolbar.is-search-locked #faq-search{
  opacity: .55;
  pointer-events: none;
}

/* nascondo l'icona X nativa dove presente (così non raddoppia) */
#faq-search::-webkit-search-cancel-button{
  -webkit-appearance: none;
}



























/* =========================================
   FAQ – FIX: i button globali non devono “rompere” le pill
========================================= */
#faq .faq-pills button.philosophy-keyword-pill{
  width: auto;
  text-decoration: none;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
#faq .faq-pills button.philosophy-keyword-pill:focus{
  outline: none;
}
#faq .faq-pills button.philosophy-keyword-pill:focus-visible{
  outline: 2px solid rgba(70,109,134,0.45);
  outline-offset: 3px;
}




/* =========================================
   FAQ – Pill Variante A (coerente + active blu pieno)
========================================= */
#faq .faq-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

#faq .faq-pills .philosophy-keyword-pill{
  background: #f4f7fb;
  border: 2px solid rgba(70,109,134,0.16);
  color: var(--fz-blue-dark);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: transform .18s var(--fz-ease2),
              box-shadow .18s var(--fz-ease2),
              background .18s var(--fz-ease2),
              color .18s var(--fz-ease2),
              border-color .18s var(--fz-ease2);
}

#faq .faq-pills .philosophy-keyword-pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  border-color: rgba(70,109,134,0.28);
  background: rgba(70,109,134,0.06);
}

#faq .faq-pills .philosophy-keyword-pill.is-active{
  background: var(--fz-green);
  border-color: rvar(--fz-green);
  color: #fff;
  box-shadow: 0 12px 30px rgba(70,109,134,0.22);
}

#faq .faq-pills .philosophy-keyword-pill.is-active:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(70,109,134,0.28);
}


/* FAQ – pill filtri: stato attivo SENZA arancione */
.faq-filters .pill.active,
.faq-filters .pill[aria-selected="true"] {
  border-color: var(--fz-blue);
  background: rgba(70,109,134,0.08);
  color: var(--fz-blue-dark);
  box-shadow: none;
}


/* Focus visibile SOLO da tastiera, non da tap */
.faq-filters .pill:focus {
  outline: none;
}

.faq-filters .pill:focus-visible {
  outline: 2px solid rgba(70,109,134,0.45);
  outline-offset: 2px;
}


.faq-filters .pill.active {
  border-color: transparent;
  background: rgba(70,109,134,0.10);
}

/* FAQ – rimuovi ring arancione dalla pill attiva (override vecchia regola) */
#faq .faq-pills .faq-pill.is-active{
  outline: none !important;
}




















/* ============================================
   FAQ — "Scegli un tema" = stile "Aree di competenza"
   (override finale)
============================================ */
#faq .faq-kicker{
  margin-top: 0;
  margin-bottom: 8px;              /* in FAQ serve “staccare” dalle pill */
  font-size: .75rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(40,52,73,0.55);
  opacity: 1;                      /* reset del vecchio .faq-kicker */
}







/* ============================================
   TEAM — Tabs come pill FAQ (senza icona)
   (override finale)
============================================ */
#team .team-tabs--pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 10px;
  border-bottom: 0;        /* elimina la riga sotto */
  font-size: 1rem;          /* evita lo “shrink” dei vecchi tab */
}

/* neutralizza lo stile “underline tab” vecchio */
#team .team-tabs--pills .team-tab{
  padding: 0.4rem 0.85rem;  /* identico alle pill */
  border-bottom: 0 !important;
  background-clip: padding-box;
}

/* stato attivo = VERDE (come mi avevi chiesto) */
#team .team-tabs--pills .team-tab.active,
#team .team-tabs--pills .team-tab.is-active{
  outline: none !important;
  opacity: 1;
  background: rgba(129,178,154,0.22);
  border-color: rgba(129,178,154,0.85);
  box-shadow:
    0 0 0 1px rgba(129,178,154,0.28),
    0 6px 16px rgba(0,0,0,0.08);
}

/* focus accessibile (senza arancione) */
#team .team-tabs--pills .team-tab:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(129,178,154,0.35),
    0 10px 24px rgba(0,0,0,0.10);
}

/* (extra) elimina l’arancione anche sulle pill FAQ se ricompare */
#faq .faq-pill.is-active{
  outline: none !important;
}


/* =========================================================
   PILL SYSTEM — override finale (FAQ + TEAM)
   Metti in FONDO al file
========================================================= */

/* 1) FAQ: elimina definitivamente l’outline arancione della pill attiva */
#faq .faq-pill.is-active,
#faq .faq-pills .faq-pill.is-active{
  outline: none !important;
  outline-offset: 0 !important;
}

/* Se stai usando le pill del sito (philosophy-keyword-pill) in FAQ */
#faq .faq-pills .philosophy-keyword-pill.is-active{
  background: var(--fz-green);
  border-color: rgba(129,178,154,0.85);
  color: #fff;
  box-shadow: 0 12px 30px rgba(129,178,154,0.18);
}

/* Fix typo che hai nel file: "rvar(--fz-green)" rompe il border-color */
#faq .faq-pills .philosophy-keyword-pill.is-active{
  border-color: rgba(129,178,154,0.85) !important;
}

/* 2) FAQ: kicker identico a “Aree di competenza” */
#faq .faq-kicker.team-tags-label{
  margin: 0 0 8px;
}

/* 3) TEAM: kicker sopra i tab */
#team .team-kicker{
  margin-top: 18px;
  margin-bottom: 8px;
}

/* 4) TEAM: tabs come pill (NO full-width, NO underline-tabs) */
#team .team-tabs.team-tabs--pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  border-bottom: 0 !important;
  font-size: 1rem;
}

/* la pill non deve “allungarsi” */
#team .team-tabs.team-tabs--pills .team-tab{
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 6px 12px;
  border-bottom: 0 !important;        /* ammazza lo stile vecchio */
  text-decoration: none;
  cursor: pointer;
}

/* stati: identici a FAQ (hover + active verde) */
#team .team-tabs.team-tabs--pills .philosophy-keyword-pill{
  background: #f4f7fb;
  border: 2px solid rgba(70,109,134,0.16) !important;
  color: var(--fz-blue-dark);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: transform .18s var(--fz-ease2),
              box-shadow .18s var(--fz-ease2),
              background .18s var(--fz-ease2),
              color .18s var(--fz-ease2),
              border-color .18s var(--fz-ease2);
}

#team .team-tabs.team-tabs--pills .philosophy-keyword-pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  border-color: rgba(70,109,134,0.28);
  background: rgba(70,109,134,0.06);
}

/* ACTIVE = verde (come mi hai chiesto) */
#team .team-tabs.team-tabs--pills .team-tab.active{
  background: var(--fz-green);
  border-color: rgba(129,178,154,0.85);
  color: var(--fz-blue-dark);
  color: #fff;
  box-shadow: 0 12px 30px rgba(129,178,154,0.18);
  /*box-shadow:
    0 0 0 1px rgba(129,178,154,0.28),
    0 10px 24px rgba(0,0,0,0.10);*/
}

/* focus accessibile (niente arancione) */
#team .team-tabs.team-tabs--pills .team-tab:focus{
  outline: none;
}
#team .team-tabs.team-tabs--pills .team-tab:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(129,178,154,0.35),
    0 10px 24px rgba(0,0,0,0.10);
}

/* TEAM tabs pills: niente space-between, come le pill FAQ */
#team .team-tabs.team-tabs--pills{
  justify-content: flex-start !important;
  align-items: center;
  gap: 10px !important;
}

/* sicurezza extra: evita che i bottoni tentino di riempire spazio */
#team .team-tabs.team-tabs--pills .team-tab{
  flex: 0 0 auto !important;
  width: auto !important;
}



/* stato attivo = VERDE (bordo uniforme 2px, NO ring extra) */
#team .team-tabs--pills .team-tab.active,
#team .team-tabs--pills .team-tab.is-active{
  outline: none !important;
  opacity: 1;

  /* il tuo look */
  background: rgba(129,178,154,0.22);

  /* bordi SEMPRE 2px reali */
  border: 2px solid rgba(129,178,154,0.85);

  /* IMPORTANTISSIMO: niente underline tab residuo */
  border-bottom: 0 !important;

  /* solo ombra “premium”, senza 0 0 0 1px */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}





















/* =======================================================
   ATOMIC – Card shell identica a .service-item (finale)
   Incolla in fondo a style.css (così vince su tutto)
======================================================= */

/* Solo “scocca” (bg/radius/shadow/padding) */
.fz-card-service{
  background: #ffffff;
  padding: 20px 20px 20px 16px;
  border-radius: 14px;

  /* come override finale delle service-item */
  box-shadow: 0 0 0 1px rgba(70,109,134,0.12),
              0 6px 18px rgba(0,0,0,0.05);
}

/* Hover “molto più soft” (niente lift) */
.fz-card-service:hover{
  transform: none;
  box-shadow: 0 0 0 1px rgba(70,109,134,0.16),
              0 10px 24px rgba(0,0,0,0.07);
}


/* Quando una FAQ usa la scocca servizi, disattivo la scocca FAQ */
.faq-row.fz-card-service{
  border: 0;          /* la service-item non ha border separato */
  background: #fff;   /* pulito come servizi */
  border-radius: 14px;/* identico */
  box-shadow: 0 0 0 1px rgba(70,109,134,0.12),
              0 6px 18px rgba(0,0,0,0.05);
}

/* hover identico servizi (soft, niente lift) */
.faq-row.fz-card-service:hover{
  transform: none;
  box-shadow: 0 0 0 1px rgba(70,109,134,0.16),
              0 10px 24px rgba(0,0,0,0.07);
}

.faq-row.fz-card-service { padding: 15px; }
.faq-row.fz-card-service .faq-q{ padding: 0px; }
.faq-row.fz-card-service .faq-a{ margin-top: 10px; padding-bottom:0px; font-size:1.02rem;   text-align: justify;
  text-justify: inter-word;}















  /* ===========================================
     ATOM: FZ DOT (tondino identico ai Servizi)
     Uso:
     - <span class="fz-dot fz-dot--sm"><img ...></span>
     - <div  class="fz-dot fz-dot--md"><img ...></div>
  =========================================== */

  .fz-dot{
    border-radius: 999px;
    background: linear-gradient(135deg, #f7f9fc, #eef3f8);
    border: 1px solid rgba(70,109,134,0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /*box-shadow:
      0 6px 15px rgba(70,109,134,0.22),
      inset 0 1px 2px rgba(255,255,255,0.95);*/
    transition:
      transform .22s var(--fz-ease2),
      box-shadow .22s var(--fz-ease2),
      border-color .22s var(--fz-ease2);
  }

  .fz-dot img{
    width: 90%;
    height: 90%;
    object-fit: contain;
    display: block;
  }

  /* size presets */
  .fz-dot--sm{ width: 40px; height: 40px; }
  .fz-dot--md{ width: 64px; height: 64px; }  /* se ti serve identico ai Servizi */
  
  
  /* FAQ: il tondino non deve “gonfiare” la riga */
  .faq-q .faq-badge-media{
    flex: 0 0 auto;
  }

  /* Hover come Servizi, ma applicato alla FAQ (sulla riga o quando aperta) */
  .faq-row:hover .faq-badge-media,
  .faq-row.is-open .faq-badge-media{
    transform: translateY(-2px);
    box-shadow:
      0 8px 18px rgba(70,109,134,0.26),
      inset 0 1px 2px rgba(255,255,255,0.9);
    border-color: rgba(70,109,134,0.7);
  }
  










  /* ===========================
     RECENSIONI — micro header
  =========================== */
  #recensioni .reviews-microhead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin: 18px 0 6px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(70,109,134,0.035);
    border: 1px solid rgba(70,109,134,0.10);
  }

  #recensioni .reviews-microhead-left{
    display:flex;
    align-items:center;
    gap: 8px;
    flex-wrap: wrap;
  }

  #recensioni .reviews-chip{
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: .70rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .10em;
      padding: 4px 10px 4px 8px;
      border-radius: 999px;
      background: rvar(--fz-light);
      color: var(--fz-blue-dark);
      box-shadow: 0 4px 12px rgba(0,0,0,0.20);
      border: 1px solid rgba(255,255,255,0.35);
      z-index: 2;
  }
  
  

  #recensioni .reviews-microhead-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    text-align:right;
  }

  #recensioni .reviews-note{
    font-size: .78rem;
    color: rgba(30, 41, 59, 0.72);
    letter-spacing: .02em;
  }

  /* Mobile: va su due righe senza “spaccarsi” */
  @media (max-width: 620px){
    #recensioni .reviews-microhead{
      flex-direction: column;
      align-items: flex-start;
    }
    #recensioni .reviews-microhead-right{
      text-align:left;
      justify-content:flex-start;
    }
  }









  /* Recensioni – footer bottone "carica altre" */
  #recensioni .reviews-footer{
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }

  /* opzionale: cambia solo la freccia del bottone per distinguerlo dalle bio */
  #recensioni .reviews-more-btn::after{
    content: "↻";
  }








  /* Recensioni: badge fonte stile cofondatore */
  #recensioni .service-item.rev{
    position: relative;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  #recensioni .review-source{
    position:absolute; top:12px; left:12px;
    display:flex; align-items:center; gap:8px;
    z-index:2;
  }
  #recensioni .review-source__icon{
    width:28px; height:28px;
    border-radius:999px;
    display:grid; place-items:center;
    background:#fff;
    border:1px solid rgba(70,109,134,0.16);
    box-shadow: 0 10px 24px rgba(15,23,42,0.10);
    font-weight:800;
    color: var(--fz-blue-dark);
  }
  
  
  
  
  

  
  /* =========================================
     BADGE COFONDATORE / RECENSIONI
     OPZIONE 2 – BLU FZ DUSTY
  ========================================= */

  .team-founder-badge{
    background: rgba(70, 109, 134, 0.85); /* blu FZ soft */
    color: #ffffff;
  }

  /* ombra fredda e leggera */
  .team-founder-badge{
    box-shadow: 0 10px 22px rgba(70, 109, 134, 0.28);
  }



  .team-bio-founder{
    background: rgba(70, 109, 134, 0.85); /* blu FZ soft */
    color: #ffffff;
  }

  /* ombra fredda e leggera */
   .team-bio-founder{
    box-shadow: 0 10px 22px rgba(70, 109, 134, 0.28);
  }






















  @media (max-width: 779px) {
    .footer { padding: 22px 0 22px; }  /* meno alto del 32/26 attuale */
  
    .footer-brand-row {
      gap: 8px;
    }
    .footer-logo { height: 30px; }     /* leggermente più piccolo */
    .footer-brand { font-size: .92rem; }
    .footer-tagline {
      font-size: .95rem;
      line-height: 1.15;
    }
  }


  @media (max-width: 779px) {
    .footer-inner { gap: 14px; } /* oggi è 16px, lo rendiamo più tight */

    /* separatori soft tra blocchi (solo dal 2° in poi) */
    .footer-col + .footer-col {
      padding-top: 10px;
      border-top: 1px solid rgba(70,109,134,0.14);
    }
  }

  @media (max-width: 779px) {
	  .footer-address,
	  .footer-privacy-link,
	  .footer-col a{
	    font-size: .86rem;
	  }
    
    .footer-col p { line-height: 1.35; } /* oggi è 1.45 */
  }

  @media (max-width: 779px) {
    .footer-col { align-items: flex-start; }
    .footer-privacy-link { align-self: flex-start; }
  }

  @media (min-width: 520px) and (max-width: 779px) {
    .footer-inner {
      grid-template-columns: 1fr 1fr;
      column-gap: 18px;
    }

    /* brand a tutta larghezza sopra */
    .footer-inner .footer-col:first-child {
      grid-column: 1 / -1;
    }

    /* niente separatori quando andiamo a 2 colonne */
    .footer-col + .footer-col {
      border-top: none;
      padding-top: 0;
    }
  }




















  .footer-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--fz-blue);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;         /* <- rende identico button + a */
    align-self: flex-start;
  }
  .footer-link:hover { opacity: .8; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .fz-pdf-card{
    margin-top: 18px;
    padding: 18px;
    border-radius: var(--fz-radius-xl);
    background:
      radial-gradient(circle at top left, rgba(251,133,0,0.10), transparent 60%),
      #fff;
    border: 1px solid rgba(70,109,134,0.14);
    box-shadow: 0 14px 34px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .fz-pdf-eyebrow{
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    color: var(--fz-orange);
    margin-bottom: 6px;
  }

  .fz-pdf-title{
    margin: 0 0 6px 0;
    font-size: 1.1rem;
    color: var(--fz-blue-dark);
  }

  .fz-pdf-text{
    margin: 0;
    opacity: .85;
    line-height: 1.55;
    color: var(--fz-blue-dark);
  }

  .fz-pdf-cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--fz-blue);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(70,109,134,0.20);
    transition: transform .18s var(--fz-ease2), background .18s var(--fz-ease2);
  }
  .fz-pdf-cta:hover{ transform: translateY(-1px); background: var(--fz-orange); }

  @media (max-width: 720px){
    .fz-pdf-card{ flex-direction: column; align-items: stretch; }
    .fz-pdf-cta{ width: 100%; }
  }