/* ==========================================================================
   ANNOUNCEMENT BAR
   ========================================================================== */
.vm-announcement {
  background: var(--vm-green-900);
  padding: 11px 0;
}
.vm-announcement .vm-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vm-announcement__text {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #f0faf4;
  font-family: var(--vm-font-ui);
  font-size: 12px;
  letter-spacing: 0.48px;
}
.vm-announcement__dot {
  width: 7px;
  height: 7px;
  border-radius: 50px;
  background: #87d39f;
  box-shadow: 0 0 0 4px rgba(135, 211, 159, 0.12);
}
.vm-announcement__phone {
  color: #f0faf4;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.vm-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(24, 102, 65, 0.13);
}
.vm-header .vm-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 17px;
}
.vm-brand {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
}
.vm-brand__mark { grid-column: 1; grid-row: 1 / 3; align-self: start; }
.vm-brand__mark {
  width: 50px;
  height: 50px;
  border-radius: 5px 16px 16px 16px;
  overflow: hidden;
  flex-shrink: 0;
}
.vm-brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.vm-brand__name {
  font-family: var(--vm-font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--vm-ink);
  letter-spacing: -0.5px;
  line-height: 1.1;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}
.vm-brand__tag {
  font-family: var(--vm-font-ui);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.26px;
  text-transform: uppercase;
  color: var(--vm-green-700);
  grid-column: 2;
  grid-row: 2;
}
.vm-nav {
  display: flex;
  gap: 40px;
}
.vm-nav a {
  font-family: var(--vm-font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #31473f;
}
.vm-nav a:hover { color: var(--vm-green-700); }

/* ==========================================================================
   MENU MOBILE (hamburger + pannello a scomparsa)
   ========================================================================== */
.vm-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.vm-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--vm-ink);
  margin-inline: auto;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
body.vm-nav-open .vm-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.vm-nav-open .vm-nav-toggle span:nth-child(2) { opacity: 0; }
body.vm-nav-open .vm-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.vm-mobile-nav {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh; /* su iOS/Safari mobile evita che la barra degli indirizzi sfasi il centraggio */
  z-index: 200;
  background: var(--vm-green-900);
  display: grid;
  grid-template-rows: auto 1fr auto; /* header fisso, link nella riga centrale che occupa tutto lo spazio restante, bottom fisso */
  padding: 20px 24px 32px;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease;
}
body.vm-nav-open .vm-mobile-nav { transform: translateX(0); visibility: visible; }
body.vm-nav-open { overflow: hidden; }
.vm-mobile-nav__top { display: flex; align-items: center; justify-content: space-between; }
.vm-mobile-nav .vm-brand__name, .vm-mobile-nav .vm-brand__tag { color: var(--vm-white); }
.vm-mobile-nav__close {
  background: none; border: 0; color: var(--vm-white); font-size: 32px;
  line-height: 1; cursor: pointer; padding: 4px 8px;
}
.vm-mobile-nav__links {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra le voci nella riga centrale (1fr) della grid sopra */
  gap: 10px;
  min-height: 0; /* evita che il contenuto forzi la riga a crescere oltre lo spazio disponibile */
}
.vm-mobile-nav__links a {
  font-family: var(--vm-font-display);
  font-size: 26px;
  line-height: 1.4;
  color: var(--vm-white);
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.vm-mobile-nav__bottom { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.vm-mobile-nav__phone { color: var(--vm-white); font-family: var(--vm-font-ui); font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 2px; }

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.vm-hero {
  padding-block: 64px 96px;
  overflow: hidden;
}
.vm-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.vm-hero__eyebrow-dot { color: var(--vm-peach); }
.vm-hero h1 {
  font-family: var(--vm-font-display);
  font-weight: 500;
  font-size: var(--vm-h1);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--vm-ink);
  margin-top: 16px;
}
.vm-hero h1 em {
  font-style: normal;
  color: var(--vm-green-500);
}
.vm-hero__lead {
  font-family: var(--vm-font-body);
  font-size: 19px;
  line-height: 1.7;
  color: var(--vm-ink);
  max-width: 560px;
  margin-top: 32px;
}
.vm-hero__actions {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 32px;
}
.vm-hero__note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}
.vm-hero__note-icon {
  width: 38px;
  height: 38px;
  border-radius: 50px;
  background: var(--vm-peach);
  flex-shrink: 0;
}
.vm-hero__note strong { display: block; font-size: 12px; color: var(--vm-ink); }
.vm-hero__note span { display: block; font-size: 12px; color: var(--vm-body); }
.vm-hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.vm-hero__blob {
  position: absolute;
  inset: 10%;
  background: #fafafa;
  border-radius: 500px;
  z-index: 0;
}
.vm-hero__visual img {
  position: relative;
  z-index: 1;
  max-width: 100%;
}

/* ==========================================================================
   QUICK INFO BAR
   ========================================================================== */
.vm-quick-info {
  background: var(--vm-green-700);
}
.vm-quick-info .vm-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.vm-quick-info__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 23px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.vm-quick-info__item:last-child { border-right: none; }
.vm-quick-info__icon {
  width: 38px;
  height: 38px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vm-quick-info__icon::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vm-white);
}
.vm-quick-info__item strong { display: block; font-size: 12px; color: var(--vm-white); font-family: var(--vm-font-ui); }
.vm-quick-info__item span { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.68); margin-top: 4px; }

/* ==========================================================================
   SEZIONE TESTO SEMPLICE (es. "ambulatorio" in home)
   ========================================================================== */
.vm-intro {
  padding-block: 96px;
}
.vm-intro--gallery { padding-top: 0; }
.vm-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.vm-intro h2 {
  font-family: var(--vm-font-display);
  font-weight: 500;
  font-size: var(--vm-h2);
  letter-spacing: -0.03em;
  color: var(--vm-ink);
  margin-top: 16px;
}
.vm-intro p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--vm-body);
  margin-top: 16px;
}

/* ==========================================================================
   SERVIZI (griglia scura in home)
   ========================================================================== */
.vm-servizi {
  background: var(--vm-green-900);
  padding-block: 96px;
  color: var(--vm-white);
}
.vm-servizi h2 {
  font-family: var(--vm-font-display);
  font-weight: 500;
  font-size: var(--vm-h2);
  letter-spacing: -0.03em;
  margin-top: 16px;
}
.vm-servizi h2 em { font-style: normal; color: var(--vm-peach); }
.vm-servizi__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}
.vm-servizi__intro p {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
}
.vm-servizi__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.vm-service-card {
  border-radius: var(--vm-radius-card);
  padding: 25px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.vm-service-card__num {
  font-family: "Comic Sans MS", cursive;
  color: var(--vm-green-700);
  font-size: 14px;
}
.vm-service-card h3 {
  font-family: var(--vm-font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--vm-ink);
  margin-top: 24px;
}
.vm-service-card p {
  font-family: var(--vm-font-body);
  font-size: 13px;
  line-height: 1.65;
  color: #52655d;
  margin-top: 12px;
}
.vm-service-card.is-mint { background: var(--vm-green-100); }
.vm-service-card.is-blue { background: var(--vm-blue-200); }
.vm-service-card.is-peach { background: var(--vm-peach); }
.vm-service-card.is-light { background: var(--vm-bg); }

/* Card galleria (es. "La struttura" in Ambulatorio) — fedele al Figma:
   foto con angoli arrotondati, etichetta in testo semplice sotto, niente
   sfondo colorato. Le foto hanno tutte la stessa proporzione (non altezza
   fissa in px, così restano bilanciate anche ridimensionando la finestra). */
.vm-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.vm-gallery-card { display: flex; flex-direction: column; gap: 14px; }
.vm-gallery-card__photo {
  aspect-ratio: 484 / 350;
  border-radius: 28px;
  overflow: hidden;
}
.vm-gallery-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-gallery-card__label {
  font-family: var(--vm-font-body);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.68px;
  color: var(--vm-ink);
}
.vm-servizi__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
}
.vm-servizi__footer p { font-size: 13px; color: rgba(255, 255, 255, 0.65); }
.vm-servizi__footer a { font-weight: 700; color: var(--vm-white); text-decoration: underline; }

/* ==========================================================================
   TEAM / DOTTORE (home)
   ========================================================================== */
.vm-doctor {
  padding-block: 96px;
}
.vm-doctor__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.vm-doctor h2 {
  font-family: var(--vm-font-display);
  font-weight: 500;
  font-size: var(--vm-h2);
  letter-spacing: -0.03em;
  margin-top: 16px;
}
.vm-doctor__role {
  font-family: var(--vm-font-display);
  color: var(--vm-green-500);
  font-size: 19px;
  margin-top: 12px;
}
.vm-doctor .vm-doctor__bio {
  font-size: 15px;
  line-height: 1.75;
  color: var(--vm-body);
  margin-top: 16px;
}
.vm-doctor__link { margin-top: 24px; display: inline-block; color: var(--vm-green-700); }
.vm-doctor__photo {
  border-radius: 50px;
  overflow: hidden;
  background: var(--vm-blue-200);
  aspect-ratio: 691 / 560;
}
.vm-doctor__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   ARTICOLI (griglia)
   ========================================================================== */
.vm-articles { padding-block: 96px; background: var(--vm-white); }
.vm-articles__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.vm-articles h2 {
  font-family: var(--vm-font-display);
  font-weight: 500;
  font-size: var(--vm-h2);
  letter-spacing: -0.03em;
  margin-top: 16px;
}
.vm-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.vm-article-card {
  display: block;
  background: var(--vm-bg);
  border-radius: 16px;
  padding: 32px 28px;
  min-width: 0; /* senza questo, un elemento di CSS Grid non si restringe mai sotto la larghezza del suo contenuto più lungo: basta una parola/frase lunga per spingere tutta la pagina oltre lo schermo su mobile */
  overflow-wrap: break-word;
  word-break: break-word;
}
.vm-article-card.is-blue { background: var(--vm-blue-200); }
.vm-article-card.is-peach { background: var(--vm-peach); }
.vm-article-card.is-mint { background: var(--vm-green-100); }
.vm-article-card__tag {
  font-family: var(--vm-font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
.vm-article-card h3 {
  font-family: var(--vm-font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--vm-ink);
  margin-top: 14px;
  line-height: 1.3;
}
.vm-article-card__excerpt {
  font-family: var(--vm-font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--vm-body);
  margin-top: 12px;
}
.vm-article-card__read {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--vm-font-ui);
  font-weight: 700;
  font-size: 13px;
  color: var(--vm-green-700);
}

/* ==========================================================================
   CONTATTI (card scura con mappa/foto)
   ========================================================================== */
.vm-contact { padding-block: 96px; }
.vm-contact-card {
  background: var(--vm-green-900);
  border-radius: var(--vm-radius-lg);
  padding: 80px;
  display: grid;
  grid-template-columns: 1fr 0.9fr 0.9fr;
  gap: 40px;
  color: var(--vm-white);
}
.vm-contact-card h2 {
  font-family: var(--vm-font-display);
  font-weight: 500;
  font-size: var(--vm-h2);
  letter-spacing: -0.03em;
  margin-top: 16px;
}
.vm-contact-card h2 em { font-style: normal; color: var(--vm-peach); }
.vm-contact-card p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.68); margin-top: 16px; }
.vm-contact-card__actions { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.vm-contact-card__mail { border-bottom: 1px solid rgba(255, 255, 255, 0.45); padding-bottom: 4px; font-size: 14px; }
.vm-contact-detail__label {
  font-family: var(--vm-font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #9bd2ad;
}
.vm-contact-detail__value {
  font-family: var(--vm-font-display);
  font-size: 17px;
  line-height: 1.55;
  margin-top: 8px;
}
.vm-contact-detail { margin-bottom: 32px; }
.vm-contact-card__photo {
  border-radius: 39px;
  overflow: hidden;
}
.vm-contact-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.vm-contact-card__photo iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(15%); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.vm-footer { background: var(--vm-green-900); color: var(--vm-white); padding-top: 70px; }
.vm-footer__main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.vm-footer .vm-brand__name,
.vm-footer .vm-brand__tag { color: var(--vm-white); }
.vm-footer .vm-footer__claim { font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, 0.58); }
.vm-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.vm-footer__nav a { font-weight: 700; font-size: 12px; }
.vm-footer__bottom {
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.45);
}
.vm-footer__bottom-links { display: flex; gap: 16px; }

/* ==========================================================================
   PERCORSO DI CURA (step numerati su sfondo scuro)
   ========================================================================== */
.vm-percorso { background: var(--vm-green-900); padding-block: 96px; color: var(--vm-white); position: relative; overflow: hidden; }
.vm-percorso__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.vm-percorso h2 { font-family: var(--vm-font-display); font-weight: 500; font-size: var(--vm-h2); letter-spacing: -0.03em; margin-top: 16px; max-width: 900px; }
.vm-percorso__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 64px; }
.vm-step-card { border-radius: 30px; padding: 30px; display: flex; flex-direction: column; gap: 24px; min-height: 300px; }
.vm-step-card__num { font-family: var(--vm-font-display); font-weight: 500; font-size: 28px; color: var(--vm-green-700); }
.vm-step-card h3 { font-family: var(--vm-font-display); font-weight: 500; font-size: 26px; color: var(--vm-ink); }
.vm-step-card p { font-size: 16px; line-height: 1.6; color: #374c43; }
.vm-step-card.is-light { background: var(--vm-bg); }
.vm-step-card.is-blue { background: var(--vm-blue-200); }
.vm-step-card.is-peach { background: var(--vm-peach); }
.vm-step-card.is-mint { background: var(--vm-green-100); }

/* ==========================================================================
   GRIGLIA TEAM (card doppie: foto + info, pescate dal CPT Staff)
   ========================================================================== */
.vm-team { padding-block: 96px; }
.vm-team__head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; }
.vm-team h2 { font-family: var(--vm-font-display); font-weight: 500; font-size: var(--vm-h2); letter-spacing: -0.03em; margin-top: 16px; }
.vm-team p { font-size: 17px; line-height: 1.7; color: var(--vm-body); }
.vm-team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 48px; }
.vm-staff-card { border-radius: 30px; overflow: hidden; display: flex; min-height: 300px; }
.vm-staff-card__photo { width: 50%; flex-shrink: 0; background: var(--vm-blue-200); }
.vm-staff-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.vm-staff-card__info { flex: 1; padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.vm-staff-card__info h3 { font-family: var(--vm-font-display); font-weight: 500; font-size: 24px; line-height: 1.25; color: var(--vm-ink); }
.vm-staff-card__info span { font-family: var(--vm-font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--vm-green-700); }
.vm-staff-card.is-peach .vm-staff-card__photo { background: var(--vm-peach); }
.vm-staff-card.is-blue .vm-staff-card__photo { background: var(--vm-blue-200); }
.vm-staff-card.is-mint .vm-staff-card__photo { background: var(--vm-green-100); }
.vm-team-note { background: var(--vm-green-700); border-radius: 30px; padding: 30px; display: flex; flex-direction: column; justify-content: center; gap: 16px; color: var(--vm-white); min-height: 300px; }
.vm-team-note__dots { color: #c6e8d4; font-size: 24px; letter-spacing: 6px; }
.vm-team-note h3 { font-family: var(--vm-font-display); font-weight: 500; font-size: 24px; }
.vm-team-note p { font-size: 15px; line-height: 1.6; color: #dcf1e5; }

/* ==========================================================================
   GRIGLIA ARTICOLI — variante scura (usata in Consigli veterinari)
   ========================================================================== */
.vm-articles.is-dark { background: var(--vm-green-900); color: var(--vm-white); }
.vm-articles.is-dark .vm-articles__head p.vm-eyebrow { color: #a4dab5; }
.vm-articles.is-dark h2 { color: var(--vm-white); }
.vm-articles.is-dark .vm-articles__foot-note { color: rgba(255,255,255,0.55); font-size: 13px; margin-top: 24px; }

@media (max-width: 960px) {
  .vm-percorso__head, .vm-team__head { grid-template-columns: 1fr; }
}

/* ==========================================================================
   COLLABORAZIONI (partnership con altre cliniche)
   ========================================================================== */
.vm-collab { background: #e8f2ed; padding: 88px 0; }
.vm-collab__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.vm-collab__eyebrow { font-family: var(--vm-font-ui); font-weight: 700; font-size: 13px; letter-spacing: 1px; color: #09402b; }
.vm-collab h2 { font-family: var(--vm-font-display); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.6rem); color: #09402b; margin-top: 20px; line-height: 1.2; }
.vm-collab p { font-size: 16px; line-height: 1.7; color: #09402b; margin-top: 20px; max-width: 520px; }
.vm-collab__contact { margin-top: 20px; font-size: 14px; font-weight: 700; color: #09402b; line-height: 1.7; }
.vm-collab__logo { background: var(--vm-white); border-radius: 28px; min-height: 380px; display: flex; align-items: center; justify-content: center; }

@media (max-width: 960px) {
  .vm-collab__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HERO SCURA full-bleed — usata dalle pagine Servizio, e disponibile come
   blocco "Sezioni" per Ambulatorio/Servizi o qualunque pagina futura che
   voglia riprendere questa estetica.
   ========================================================================== */
.vm-servizio-hero {
  background-color: var(--vm-green-900);
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.vm-servizio-hero .vm-container { width: 100%; }
.vm-servizio-hero__copy { padding: 96px 0; max-width: 650px; }
.vm-servizio-hero h1 {
  font-family: var(--vm-font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 5.25rem);
  line-height: 1.05;
  color: var(--vm-white);
  margin-top: 20px;
}
.vm-servizio-hero .vm-eyebrow { color: var(--vm-peach); }

/* ==========================================================================
   APPROFONDIMENTO a due colonne (WYSIWYG — può contenere link)
   ========================================================================== */
.vm-approfondimento { padding: 96px 0; background: var(--vm-white); }
.vm-approfondimento h2 {
  font-family: var(--vm-font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--vm-ink);
  margin-top: 14px;
  max-width: 800px;
}
.vm-approfondimento__cols { column-count: 2; column-gap: 60px; margin-top: 40px; }
.vm-approfondimento__cols p { font-size: 16px; line-height: 1.7; color: var(--vm-body); margin: 0 0 16px; break-inside: avoid; }
.vm-approfondimento__cols a { color: var(--vm-green-700); text-decoration: underline; }

@media (max-width: 960px) {
  .vm-servizio-hero__copy { padding: 64px 0; }
  .vm-approfondimento__cols { column-count: 1; }
}

@media (max-width: 960px) {
  .vm-hero__grid,
  .vm-intro__grid,
  .vm-servizi__intro,
  .vm-doctor__grid,
  .vm-footer__main { grid-template-columns: 1fr; }
  .vm-servizi__grid { grid-template-columns: repeat(2, 1fr); }
  .vm-articles__grid { grid-template-columns: 1fr; }
  .vm-contact-card { grid-template-columns: 1fr; padding: 40px; }
  .vm-quick-info { display: none; } /* su mobile la barra orari/indirizzo sparisce: le stesse info sono già nel footer e nella card contatti */
  .vm-nav { display: none; }
  .vm-nav-toggle { display: flex; }

  /* Header: logo e hamburger restano sulla stessa riga, "Prenota una
     visita" scende a riga intera sotto invece di stare incastrato in
     mezzo (dove il testo andava a capo dentro il bottone a pillola). */
  .vm-header .vm-container {
    flex-wrap: wrap;
    row-gap: 14px;
    padding-block: 14px;
  }
  .vm-brand { order: 1; }
  .vm-nav-toggle { order: 2; }
  .vm-header__book {
    order: 3;
    flex: 1 1 100%;
    text-align: center;
    white-space: nowrap;
    padding-inline: 20px;
  }
}
@media (max-width: 380px) {
  .vm-header__book { font-size: 13px; padding-inline: 12px; }
}
@media (max-width: 640px) {
  .vm-servizi__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SFONDO-PATTERN (PNG con trasparenza) sopra il colore, per le sezioni
   verde scura. Il campo è opzionale: se non impostato, la sezione resta
   con il solo colore pieno come sempre.
   ========================================================================== */
.vm-has-pattern { position: relative; overflow: hidden; }
.vm-has-pattern > .vm-bg-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}
.vm-has-pattern > .vm-container,
.vm-has-pattern > .vm-contact-card { position: relative; z-index: 1; }

/* ==========================================================================
   ANIMAZIONI REVEAL — fade + salita leggera all'ingresso in viewport.
   Applicata via classe .vm-reveal + script assets/js/reveal.js.
   Se JS non parte per qualche motivo, il contenuto resta comunque visibile
   (nessuna dipendenza bloccante).
   ========================================================================== */
.vm-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.vm-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .vm-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   BLOCCO "PRENOTA ORA" — titolo grande + bottone a sinistra, testo a
   destra, su sfondo chiaro. Il bottone apre il popup di prenotazione
   (gestito dal plugin Prenotazioni: qualunque link a "#prenota" lo apre).
   ========================================================================== */
.vm-prenota-cta {
  background: var(--vm-bg);
  padding-block: 96px;
}
.vm-prenota-cta__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 64px;
  align-items: center;
}
.vm-prenota-cta__colonna-sx h2 {
  font-family: var(--vm-font-display);
  font-weight: 500;
  font-size: var(--vm-h2);
  letter-spacing: -0.03em;
  color: var(--vm-ink);
  line-height: 1.05;
}
.vm-prenota-cta__colonna-sx .vm-btn {
  margin-top: 32px;
}
.vm-prenota-cta__colonna-dx {
  font-family: var(--vm-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--vm-body);
}

@media (max-width: 960px) {
  .vm-prenota-cta__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   BLOCCO SERVIZIO (foto alternata sx/dx) — pagine tipo "Servizi complementari"
   ========================================================================== */
.vm-servizio-blocco { padding-block: 96px; }
.vm-servizio-blocco__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.vm-servizio-blocco.is-invertito .vm-servizio-blocco__grid { direction: rtl; }
.vm-servizio-blocco.is-invertito .vm-servizio-blocco__grid > * { direction: ltr; }
.vm-servizio-blocco__foto { border-radius: var(--vm-radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.vm-servizio-blocco__foto img { width: 100%; height: 100%; object-fit: cover; }
.vm-servizio-blocco h2 {
  font-family: var(--vm-font-display); font-weight: 500; font-size: var(--vm-h2);
  color: var(--vm-ink); letter-spacing: -0.02em; margin: 14px 0 22px; line-height: 1.08;
}
.vm-servizio-blocco p { font-family: var(--vm-font-body); font-size: 16px; line-height: 1.75; color: var(--vm-body); margin: 0 0 18px; }
.vm-servizio-blocco h3 { font-family: var(--vm-font-serif); font-weight: 700; font-size: 19px; color: var(--vm-ink); margin: 28px 0 10px; }
.vm-servizio-blocco ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.vm-servizio-blocco ul li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.65; color: var(--vm-body); margin-bottom: 10px; }
.vm-servizio-blocco ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--vm-green-500); }
.vm-servizio-blocco ol { margin: 0 0 18px; padding-left: 20px; }
.vm-servizio-blocco ol li { font-size: 15px; line-height: 1.65; color: var(--vm-body); margin-bottom: 8px; }
.vm-servizio-blocco strong { color: var(--vm-ink); }
.vm-servizio-blocco__nota { background: var(--vm-green-100); border-radius: 16px; padding: 18px 22px; font-size: 14px; line-height: 1.6; color: var(--vm-ink); margin-top: 24px; }
.vm-servizio-blocco__nota p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .vm-servizio-blocco__grid { grid-template-columns: 1fr; gap: 32px; }
  .vm-servizio-blocco.is-invertito .vm-servizio-blocco__grid { direction: ltr; }
}

.vm-servizio-blocco__testo-dopo { margin-top: 22px; }
.vm-servizio-blocco__testo-dopo p:last-child { margin-bottom: 0; }

.vm-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.vm-sub-card { background: #fff; border: 1px solid #e5e5e2; border-radius: 18px; padding: 22px 24px; }
.vm-sub-card h4 { font-family: var(--vm-font-serif); font-weight: 700; font-size: 16px; color: var(--vm-green-700); margin: 0 0 10px; }
.vm-sub-card p { font-size: 14px; margin-bottom: 12px; }
.vm-sub-card ul li { font-size: 13.5px; }
@media (max-width: 700px) { .vm-sub-grid { grid-template-columns: 1fr; } }

.vm-mini-card { display: flex; gap: 16px; align-items: center; background: var(--vm-cream); border-radius: 18px; padding: 16px; margin-top: 28px; }
.vm-mini-card img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.vm-mini-card__testo h4 { font-family: var(--vm-font-serif); font-weight: 700; font-size: 15px; margin: 0 0 6px; color: var(--vm-ink); }
.vm-mini-card__testo p { font-size: 13px; margin: 0; line-height: 1.55; }

/* Card di navigazione rapida con ancoraggio */
.vm-quicklinks { padding-block: 56px 0; }
.vm-quicklinks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vm-quicklink-card {
  display: block; border: 1px solid transparent; border-radius: var(--vm-radius-card);
  padding: 28px 26px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.vm-quicklink-card:hover { border-color: rgba(16,63,43,.18); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16,63,43,.12); }
.vm-quicklink-card.is-light { background: var(--vm-bg); }
.vm-quicklink-card.is-blue { background: var(--vm-blue-200); }
.vm-quicklink-card.is-peach { background: var(--vm-peach); }
.vm-quicklink-card.is-mint { background: var(--vm-green-100); }
.vm-quicklink-card__num { font-family: var(--vm-font-serif); font-weight: 700; font-size: 13px; color: var(--vm-green-500); }
.vm-quicklink-card h3 { font-family: var(--vm-font-display); font-weight: 500; font-size: 21px; color: var(--vm-ink); margin: 10px 0 8px; line-height: 1.2; }
.vm-quicklink-card p { font-family: var(--vm-font-body); font-size: 13.5px; line-height: 1.55; color: var(--vm-body); margin: 0 0 14px; }
.vm-quicklink-card__arrow { font-family: var(--vm-font-ui); font-weight: 700; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--vm-green-700); }
@media (max-width: 900px) { .vm-quicklinks__grid { grid-template-columns: 1fr; } }

/* Galleria foto a numero libero (es. Ambulatorio, prima del footer) */
.vm-galleria-libera { padding-block: 96px; }
.vm-galleria-libera__head { margin-bottom: 40px; max-width: 640px; }
.vm-galleria-libera__head h2 {
  font-family: var(--vm-font-display); font-weight: 500; font-size: var(--vm-h2);
  color: var(--vm-ink); letter-spacing: -0.02em; margin-top: 14px; line-height: 1.08;
}
.vm-galleria-libera__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.vm-galleria-libera__item { margin: 0; border-radius: var(--vm-radius-card); overflow: hidden; background: var(--vm-bg); }
.vm-galleria-libera__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.vm-galleria-libera__item figcaption { padding: 12px 16px; font-family: var(--vm-font-ui); font-weight: 700; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--vm-ink); }

/* ==========================================================================
   CONTATTI + MODULO (Contact Form 7) — colonna info a sinistra (dalle
   Impostazioni sito), modulo a destra. Il modulo CF7 esce di base senza
   stile: qui lo vestiamo con lo stesso linguaggio visivo del resto del
   sito (bordi arrotondati, font, bottone a pillola).
   ========================================================================== */
.vm-contatti-blocco { padding-block: 96px; }
.vm-contatti-blocco__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .vm-contatti-blocco__grid { grid-template-columns: 1fr; gap: 40px; } }

.vm-contatti-info h2 {
  font-family: var(--vm-font-display); font-weight: 500; font-size: var(--vm-h2);
  color: var(--vm-ink); letter-spacing: -0.02em; margin: 14px 0 16px; line-height: 1.08;
}
.vm-contatti-info__lead { font-size: 16px; line-height: 1.7; color: var(--vm-body); margin-bottom: 28px; }

.vm-contatti-info__lista { list-style: none; margin: 0 0 28px; padding: 0; }
.vm-contatti-info__lista li { padding: 18px 0; border-bottom: 1px solid #e8e8e4; display: flex; flex-direction: column; gap: 4px; }
.vm-contatti-info__lista li:first-child { padding-top: 0; }
.vm-contatti-info__label { font-family: var(--vm-font-ui); font-weight: 700; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--vm-green-700); }
.vm-contatti-info__lista a, .vm-contatti-info__lista span:not(.vm-contatti-info__label):not(.vm-contatti-info__orario) { font-family: var(--vm-font-serif); font-size: 18px; color: var(--vm-ink); }
.vm-contatti-info__lista a { text-decoration: none; }
.vm-contatti-info__lista a:hover { text-decoration: underline; }
.vm-contatti-info__orario { display: block; font-family: var(--vm-font-body); font-size: 15px; color: var(--vm-body); }
.vm-contatti-info__mappa { border-radius: var(--vm-radius-card); overflow: hidden; aspect-ratio: 4/3; }
.vm-contatti-info__mappa iframe { width: 100%; height: 100%; border: 0; }

.vm-contatti-form { background: var(--vm-bg); border-radius: var(--vm-radius-lg); padding: 44px; }
.vm-contatti-form__manca { color: #b32d2e; font-size: 14px; background: #fdeaea; border-radius: 12px; padding: 14px 18px; }
.vm-contatti-form__nota { font-size: 13px; color: var(--vm-body); margin-top: 16px; text-align: center; }

/* Restyling dei campi generati da Contact Form 7 */
.vm-contatti-form .wpcf7-form p { margin: 0 0 18px; }
.vm-contatti-form .wpcf7-form label { display: block; font-family: var(--vm-font-ui); font-weight: 700; font-size: 12.5px; letter-spacing: .3px; color: var(--vm-ink); margin-bottom: 7px; }
.vm-contatti-form .wpcf7-form input[type="text"],
.vm-contatti-form .wpcf7-form input[type="email"],
.vm-contatti-form .wpcf7-form input[type="tel"],
.vm-contatti-form .wpcf7-form input[type="date"],
.vm-contatti-form .wpcf7-form select,
.vm-contatti-form .wpcf7-form textarea {
  width: 100%; box-sizing: border-box; padding: 13px 16px; border: 1px solid #ddd; border-radius: 14px;
  font-family: var(--vm-font-body); font-size: 15px; color: var(--vm-ink); background: #fff;
  transition: border-color .15s ease;
}
.vm-contatti-form .wpcf7-form input:focus, .vm-contatti-form .wpcf7-form textarea:focus, .vm-contatti-form .wpcf7-form select:focus {
  outline: none; border-color: var(--vm-green-500);
}
.vm-contatti-form .wpcf7-form textarea { min-height: 140px; resize: vertical; }
.vm-contatti-form .wpcf7-form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vm-green-700); color: #fff; border: 1px solid var(--vm-green-700); border-radius: var(--vm-radius-pill);
  padding: 16px 34px; font-family: var(--vm-font-ui); font-weight: 700; font-size: 14px; letter-spacing: .26px; text-transform: uppercase;
  cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.vm-contatti-form .wpcf7-form input[type="submit"]:hover { background: #dbebe0; color: var(--vm-green-900); border-color: #dbebe0; }
.vm-contatti-form .wpcf7-form input[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }
.vm-contatti-form .wpcf7-not-valid-tip { color: #b32d2e; font-size: 12.5px; margin-top: 6px; }
.vm-contatti-form .wpcf7-form-control-wrap { display: block; }
.vm-contatti-form .wpcf7-response-output {
  border-radius: 12px; padding: 14px 18px; margin: 18px 0 0; font-size: 13.5px; border: 1px solid #ddd;
}
.vm-contatti-form form.sent .wpcf7-response-output { border-color: var(--vm-green-500); background: var(--vm-green-100); color: var(--vm-green-900); }
.vm-contatti-form form.failed .wpcf7-response-output,
.vm-contatti-form form.aborted .wpcf7-response-output,
.vm-contatti-form form.spam .wpcf7-response-output { border-color: #e3b3b0; background: #fdeaea; color: #b32d2e; }
.vm-contatti-form .wpcf7-spinner { margin-left: 10px; }
.vm-contatti-form .wpcf7 .ajax-loader { margin: 0 0 0 10px; }
@media (max-width: 640px) { .vm-contatti-form { padding: 28px; } }

/* ==========================================================================
   MAPPA GOOGLE "PROTETTA" — segnaposto al posto dell'iframe finché non
   si dà il consenso (click sul bottone, o "Accetta tutti" nel banner).
   ========================================================================== */
.vm-mappa-gated { width: 100%; height: 100%; min-height: 280px; }
.vm-mappa-gated iframe { width: 100%; height: 100%; border: 0; display: block; }
.vm-mappa-gated__placeholder {
  width: 100%; height: 100%; min-height: 280px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; text-align: center; background: var(--vm-cream); border-radius: inherit; padding: 32px;
}
.vm-mappa-gated__placeholder p { font-size: 13.5px; color: var(--vm-body); max-width: 320px; margin: 0; }
.vm-mappa-gated__bottone { padding: 12px 24px; font-size: 12.5px; }

/* ==========================================================================
   BANNER COOKIE
   ========================================================================== */
.vm-cookie-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 9998;
  background: var(--vm-green-900); color: #fff; border-radius: 20px; padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  max-width: 900px; margin: 0 auto; box-shadow: 0 12px 40px rgba(16,63,43,.35);
  transform: translateY(150%); /* relativo alla sua stessa altezza: nasconde sempre del tutto, qualunque sia l'altezza reale (cambia tra desktop e mobile) */
  transition: transform .35s ease;
  pointer-events: none;
}
.vm-cookie-banner.is-visibile { transform: translateY(0); pointer-events: auto; }
.vm-cookie-banner__testo { flex: 1 1 320px; }
.vm-cookie-banner__testo p { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.85); }
.vm-cookie-banner__testo a { color: #fff; text-decoration: underline; }
.vm-cookie-banner__azioni { display: flex; gap: 10px; flex-wrap: wrap; }
.vm-btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.vm-btn--outline:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.6); }
@media (max-width: 640px) {
  .vm-cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 16px 18px; gap: 14px; }
  .vm-cookie-banner__testo p { font-size: 12.5px; line-height: 1.5; }
  .vm-cookie-banner__azioni { justify-content: stretch; gap: 8px; }
  .vm-cookie-banner__azioni .vm-btn { flex: 1; padding: 12px 14px; font-size: 11.5px; }
}

/* ==========================================================================
   TESTO LEGALE (Privacy Policy / Cookie Policy)
   ========================================================================== */
.vm-testo-legale { padding-block: 80px 96px; }
.vm-testo-legale__contenitore { max-width: 780px; margin: 0 auto; }
.vm-testo-legale h1 {
  font-family: var(--vm-font-display); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--vm-ink); letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1.08;
}
.vm-testo-legale__data { font-family: var(--vm-font-ui); font-size: 12.5px; color: var(--vm-body); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 44px; }
.vm-testo-legale__corpo { font-family: var(--vm-font-body); font-size: 16px; line-height: 1.8; color: var(--vm-body); }
.vm-testo-legale__corpo h2 { font-family: var(--vm-font-serif); font-weight: 700; font-size: 22px; color: var(--vm-ink); margin: 40px 0 14px; }
.vm-testo-legale__corpo h3 { font-family: var(--vm-font-serif); font-weight: 700; font-size: 17px; color: var(--vm-green-700); margin: 28px 0 10px; }
.vm-testo-legale__corpo p { margin: 0 0 16px; }
.vm-testo-legale__corpo ul, .vm-testo-legale__corpo ol { margin: 0 0 16px; padding-left: 22px; }
.vm-testo-legale__corpo li { margin-bottom: 8px; }
.vm-testo-legale__corpo strong { color: var(--vm-ink); }
.vm-testo-legale__corpo a { color: var(--vm-green-700); }
.vm-testo-legale__corpo table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.vm-testo-legale__corpo table th, .vm-testo-legale__corpo table td { border: 1px solid #e5e5e2; padding: 10px 12px; text-align: left; vertical-align: top; }
.vm-testo-legale__corpo table th { background: var(--vm-bg); font-family: var(--vm-font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }

/* ==========================================================================
   FILTRI PER ANIMALE + "MOSTRA ALTRI" — pagina Consigli veterinari
   ========================================================================== */
.vm-articles__filtri { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; }
.vm-filtro-animale {
  font-family: var(--vm-font-ui); font-weight: 700; font-size: 12.5px; letter-spacing: .3px; text-transform: uppercase;
  padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: rgba(255,255,255,.7);
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.vm-articles:not(.is-dark) .vm-filtro-animale { border-color: #ddd; color: var(--vm-body); }
.vm-filtro-animale:hover { border-color: var(--vm-green-500); color: #fff; }
.vm-articles:not(.is-dark) .vm-filtro-animale:hover { color: var(--vm-ink); }
.vm-filtro-animale.is-attivo { background: var(--vm-green-500); border-color: var(--vm-green-500); color: #fff; }

.vm-articles__loading { color: rgba(255,255,255,.6); font-size: 14px; grid-column: 1 / -1; }
.vm-articles:not(.is-dark) .vm-articles__loading { color: var(--vm-body); }

.vm-articles__carica-altri-wrap { text-align: center; margin-top: 36px; }
.vm-carica-altri { background: transparent; }
.vm-carica-altri[data-tema-scuro="1"] { color: #fff; border-color: rgba(255,255,255,.4); }
.vm-carica-altri[data-tema-scuro="1"]:hover { background: rgba(255,255,255,.12); color: #fff; }
.vm-carica-altri[data-tema-scuro="0"] { color: var(--vm-green-700); border-color: var(--vm-green-700); }
.vm-carica-altri:disabled { opacity: .6; cursor: not-allowed; }