/* ============================================================
   Centro Medico Sant'Angelo — stylesheet del sito
   HTML + Bootstrap 5 + jQuery
   Basato sul design system ufficiale (teal petrol, Schibsted/Hanken).
   Organizzato in sezioni: 1) token  2) base  3) override Bootstrap
   4) header  5) hero  6) componenti  7) footer  8) utility/responsive
   ============================================================ */

/* ---------- 1. TOKEN DEL BRAND (design system) ---------- */
:root {
  /* Teal / petrol */
  --teal-950:#062e2c; --teal-900:#06403d; --teal-800:#075450; --teal-700:#06635f;
  --teal-600:#00736e; --teal-500:#0d938d; --teal-400:#22b0ac; --teal-300:#5cc9c8;
  --teal-200:#9adcdb; --teal-100:#cdeceb; --teal-50:#e9f6f5;
  /* Neutrali teal-tinted */
  --ink-950:#0c211f; --ink-900:#14312f; --ink-700:#334745; --ink-600:#48605d;
  --ink-500:#66807d; --ink-400:#8aa09d; --ink-300:#b4c3c1; --ink-200:#d6dfde;
  --ink-150:#e4ebea; --ink-100:#eef3f2; --ink-50:#f5f9f8;
  /* Superfici */
  --paper:#fbfdfc; --mist:#f0f6f5; --white:#fff;
  /* Stati */
  --success-600:#1f8a5b; --success-100:#d9f0e4;
  --warning-600:#c98a1e; --warning-100:#f8ecd2;
  --danger-600:#cc4e3a;  --danger-100:#f8e0da;
  /* Alias semantici */
  --brand:var(--teal-600); --brand-strong:var(--teal-700); --brand-accent:var(--teal-400);
  --brand-soft:var(--teal-100); --brand-tint:var(--teal-50);
  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500);
  --text-faint:var(--ink-400); --text-link:var(--teal-600); --text-link-hover:var(--teal-800);
  --surface-page:var(--paper); --surface-alt:var(--mist);
  --border:var(--ink-150); --border-strong:var(--ink-200); --border-brand:var(--teal-200);
  /* Tipografia */
  --font-display:"Schibsted Grotesk","Hanken Grotesk",system-ui,sans-serif;
  --font-sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Spline Sans Mono",ui-monospace,"SFMono-Regular",monospace;
  --ls-caps:0.14em;
  /* Scala tipografica — UN SOLO set di misure per il testo, riusato ovunque.
     (Ingrandimento marcato ~+20/25%. Le dimensioni delle ICONE restano a parte.) */
  --fs-2xs:0.8125rem; /* 13px — micro-label, eyebrow, caps minuscoli */
  --fs-xs:0.875rem;   /* 14px — caption, meta, tag */
  --fs-sm:1rem;       /* 16px — testo UI / secondario */
  --fs-base:1.1875rem;/* 19px — corpo del testo */
  --fs-md:1.3125rem;  /* 21px — lead, sottotitoli, titoli card */
  --fs-lg:1.5rem;     /* 24px — h3 blog, CTA */
  --fs-xl:1.875rem;   /* 30px — titoli di sezione */
  --fs-2xl:2.5rem;    /* 40px — titoloni */
  --fs-3xl:3rem;      /* 48px — hero di dettaglio */
  /* Radius */
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px;
  --radius-2xl:40px; --radius-pill:999px;
  /* Ombre teal-tinted */
  --shadow-xs:0 1px 2px rgba(6,64,61,.06);
  --shadow-sm:0 2px 8px rgba(6,64,61,.07);
  --shadow-md:0 8px 24px rgba(6,64,61,.09);
  --shadow-lg:0 18px 48px rgba(6,64,61,.12);
  --shadow-xl:0 32px 72px rgba(6,64,61,.16);
  /* Motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:130ms; --dur-base:220ms;
}

/* ---------- 2. BASE ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-body);
  background: var(--surface-page);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5 { font-family: var(--font-display); color: var(--text-strong); letter-spacing: -0.02em; }
h2{
  color: var(--brand);
}
a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--text-link-hover); }
.mono { font-family: var(--font-mono); }
section { scroll-margin-top: 92px; }

.fw-700{
  font-weight: 700;
}

/* Eyebrow / kicker — firma del brand */
.eyebrow {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--brand-accent);
}
.section-title { font-weight: 700; font-size: var(--fs-2xl); line-height: 1.1; }
.section-lead { color: var(--text-muted); font-size: var(--fs-md); }

/* ---------- 3. OVERRIDE BOOTSTRAP ---------- */
:root {
  --bs-primary: #00736e;
  --bs-primary-rgb: 0,115,110;
  --bs-body-color: #334745;
  --bs-body-font-family: var(--font-sans);
  --bs-border-color: var(--ink-150);
  --bs-link-color-rgb: 0,115,110;
  --bs-link-hover-color-rgb: 7,84,80;
}
.container { max-width: 1400px; }

/* Bottoni — pill, firma del brand */
.btn { font-weight: 600; border-radius: var(--radius-pill); transition: all var(--dur-base) var(--ease-out); display: inline-flex; align-items: center; gap: .5rem; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-lg { padding: .8rem 1.6rem; font-size: var(--fs-base); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; box-shadow: var(--shadow-md); }
.btn-soft { background: var(--brand-tint); border: 1px solid var(--border-brand); color: var(--brand-strong); }
.btn-soft:hover { background: var(--brand-soft); color: var(--brand-strong); }
.btn-outline-primary { border: 1.5px solid var(--brand); color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); color: #fff; }
.btn-inverse { background: #fff; color: var(--brand-strong); }
.btn-inverse:hover { background: var(--teal-50); color: var(--brand-strong); }

.form-control, .form-select {
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: .6rem .9rem; color: var(--text-strong); font-family: var(--font-sans);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-accent); box-shadow: 0 0 0 4px rgba(34,176,172,.24);
}
.badge-brand { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.badge-accent { background: var(--teal-400); color: #063; }
/* pill del riquadro grande del blog ("In evidenza" / "Ultimo articolo") */
.badge-featured { background: var(--brand); color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }

/* ---------- 4. HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(251,253,252,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .navbar-brand img { height: 40px; }
.site-header .nav-link {
  color: var(--text-body); font-weight: 500; font-size: var(--fs-sm);
  padding: .55rem .85rem !important; border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.site-header .nav-link:hover, .site-header .nav-link.active {
  color: var(--brand-strong); background: var(--brand-tint);
}
.header-tel { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-strong); font-weight: 500; }
/* Icona "cerca" nell'header (accanto al telefono) — solo la lente, nel verde
   del brand, senza sfondo. Porta alla pagina /cerca/. */
.header-search {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: .25rem; color: var(--brand); font-size: var(--fs-md); line-height: 1;
  transition: color var(--dur-fast) var(--ease-out);
}
.header-search:hover { color: var(--brand-strong); }

/* ---------- 5. HERO ---------- */
/* overflow: visible così la tendina dei risultati di ricerca (dropdown della
   .hero-search) non viene tagliata al bordo dell'hero quando è lunga: l'immagine
   di sfondo è inset:0 a misura esatta, quindi non deborda comunque. */
.hero { position: relative; overflow: visible; background: var(--ink-950); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .26; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,46,44,.55), rgba(6,64,61,.82)); }
.hero-inner { position: relative; z-index: 2; }
.hero h1 { color: #fff; font-weight: 700; font-size: clamp(2.9rem,6vw,4.5rem); line-height: 1.03; letter-spacing: -0.03em; }
.hero .accent { color: var(--brand-accent); }
.hero-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.14); color: #fff; padding: .45rem .95rem;
  border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600;
}
/* Gradient band (CTA / sezioni brand) */
.brand-gradient { background: linear-gradient(150deg, var(--teal-800) 0%, var(--teal-600) 55%, var(--teal-500) 100%); }
.page-hero { position: relative; overflow: hidden; }
/* Variante con barra di ricerca (pagina /cerca/): niente clipping, altrimenti
   la tendina dei risultati viene tagliata al bordo dell'hero. Il ::after è
   inset:0, quindi non deborda. */
.page-hero-search { overflow: visible; }
.page-hero::after { content:""; position:absolute; inset:0; opacity:.14; background: radial-gradient(circle at 82% 18%, #fff 0, transparent 44%); }

/* Barra di ricerca hero */
.hero-search { position: relative; max-width: 660px; }
.hero-search .search-box {
  display: flex; gap: .5rem; background: #fff; border-radius: var(--radius-pill);
  padding: .5rem; box-shadow: var(--shadow-lg); align-items: center;
}
.hero-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: var(--fs-base); color: var(--text-strong); padding: 0 .5rem 0 2.8rem; height: 48px;
}
.hero-search .search-icon { position: absolute; left: 1.6rem; color: var(--brand); z-index: 3; }
.search-results {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xl);
  overflow: hidden; z-index: 40; text-align: left; display: none;
}
.search-results a { display: flex; align-items: center; gap: .9rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--border); color: var(--text-strong); }
.search-results a:hover { background: var(--teal-50); }
.search-results .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--teal-50); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: none; }

/* ---------- 6. COMPONENTI ---------- */
/* Service card (icona nel ring teal — firma del brand) */
.service-card {
  display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 1.6rem 1.5rem; height: 100%;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-ring {
  width: 56px; height: 56px; border-radius: 50%; background: var(--teal-50); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1rem;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.service-card:hover .service-ring { background: var(--brand); color: #fff; }
.service-card h3 { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 .4rem; }
.service-card p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; line-height: 1.5; }
.service-card .go { color: var(--brand-strong); font-weight: 600; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: .3rem; margin-top: 1rem; }

/* Doctor card (grayscale → colore su hover) */
.doctor-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; height: 100%; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.doctor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.doctor-photo { aspect-ratio: 1/1; overflow: hidden; background: var(--teal-50); }
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter var(--dur-slow,380ms) var(--ease-out); }
.doctor-card:hover .doctor-photo img { filter: grayscale(0); }
.doctor-body { padding: 1.1rem 1.2rem 1.4rem; }
.doctor-body .eyebrow { font-size: var(--fs-2xs); }
.doctor-body h3 { font-size: var(--fs-base); margin: .25rem 0 .35rem; }
.doctor-body p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; line-height: 1.45; }

/* Card generica / prenotazione */
.soft-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }

/* Chip filtro */
.filter-chip {
  font-weight: 600; font-size: var(--fs-sm); padding: .55rem 1.1rem; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong); background: #fff; color: var(--text-body); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-chip:hover { border-color: var(--brand); color: var(--brand); }
.filter-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.filter-chip:disabled { opacity: .32; cursor: default; pointer-events: none; }

/* Pagina Medici — barra alfabetica + ricerca */
.medici-alpha .filter-chip { min-width: 2.6rem; padding: .5rem .6rem; text-align: center; }
.medici-alpha .filter-chip[data-letter="all"] { min-width: auto; padding: .5rem 1rem; }
.medici-search { position: relative; }
.medici-search .form-control { padding-left: 2.5rem; border-radius: var(--radius-pill); min-width: 240px; }
.medici-search .search-ic { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }

/* Blog — prosa articolo */
.blog-prose { font-size: var(--fs-base); }
.blog-prose p { margin: 0 0 1rem; line-height: 1.7; color: var(--text-body); }
.blog-prose h3 { margin: 1.75rem 0 .6rem; font-size: var(--fs-lg); font-family: var(--font-display); color: var(--text-strong); }
.blog-prose .lead { line-height: 1.55; }
@media (max-width: 991.98px) { .blog-featured-img { min-height: 220px !important; } }
.blog-prose h2 { margin: 2rem 0 .7rem; font-size: var(--fs-lg); font-family: var(--font-display); color: var(--text-strong); letter-spacing: -.01em; }

/* Blog — vista articolo (2 colonne + sidebar) */
.blog-breadcrumb { border-bottom: 1px solid var(--border); background: var(--surface-page); }
.blog-breadcrumb .container { display: flex; align-items: center; gap: .5rem; padding-top: 1rem; padding-bottom: 1rem; font-size: var(--fs-sm); color: var(--text-muted); flex-wrap: wrap; }
.blog-breadcrumb a { color: var(--text-muted); }
.blog-breadcrumb a:hover { color: var(--brand-strong); }
.blog-breadcrumb .sep { color: var(--border-strong); }
.blog-breadcrumb .current { color: var(--text-strong); }

.cmsa-art-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 3rem; align-items: start; }
@media (max-width: 991.98px) { .cmsa-art-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.blog-avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--teal-700), var(--teal-400)); color: #fff; font-family: var(--font-display); font-weight: 700; }
.blog-avatar-lg { width: 88px; height: 88px; font-size: 1.6rem; }
/* variante con foto del medico: stesso tondo, l'immagine sostituisce le iniziali */
.blog-avatar.has-photo { background: var(--teal-50); overflow: hidden; }
.blog-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.blog-author-name { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); line-height: 1.2; }

/* Blog — hero: immagine di sfondo del titolo, contenuta nell'article e stondata.
   Banner largo e basso; l'altezza cresce coi titoli lunghi (titolo con cap in ch).
   L'immagine occupa ESATTAMENTE i 3/5 di destra (background-size: 60% width), a tutta
   larghezza: se più alta del banner viene tagliata sopra/sotto, mai ai lati.
   Il background-color copre l'eventuale scoperto (immagini più basse del banner). */
.blog-hero { position: relative; display: flex; align-items: flex-end; min-height: 400px; background-color: var(--teal-800); background-repeat: no-repeat; background-size: auto 100%; background-position: right center; overflow: hidden; border-radius: var(--radius-xl); margin-bottom: 1.75rem; }
.blog-hero.brand-gradient { min-height: 210px; }
/* gradiente orizzontale sul verde brand: verde pieno per i 2/5 di sinistra (testo),
   sfumatura larga 1/5 (40%→60%), poi trasparente sui restanti 3/5 (immagine visibile a destra) */
.blog-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, var(--teal-800) 0%, var(--teal-800) 40%, rgba(7,84,80,0) 60%, rgba(7,84,80,0) 100%); }
.blog-hero-inner { position: relative; z-index: 2; padding: 1.75rem 2rem; }
.blog-hero .badge-brand { background: rgba(255,255,255,.20); color: #fff; }
.blog-hero-title { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem,4vw,3.1rem); line-height: 1.15; letter-spacing: -.02em; max-width: 20ch; text-wrap: balance; }
@media (max-width: 575.98px) {
  .blog-hero-inner { padding: 1.25rem 1.25rem; }
  .blog-hero-title { max-width: 100%; }
  /* su mobile il testo occupa tutta la larghezza: immagine a tutto banner + overlay verticale coprente */
  .blog-hero { background-size: cover; background-position: center; }
  .blog-hero-overlay { background: linear-gradient(180deg, rgba(7,84,80,.35) 0%, rgba(6,64,61,.85) 100%); }
}

.blog-cta-dark { position: relative; overflow: hidden; margin: 2.25rem 0 2rem; padding: 1.9rem 2rem; border-radius: var(--radius-xl); color: #fff; background: linear-gradient(150deg, var(--teal-700) 0%, var(--teal-500) 100%); }
.blog-cta-dark::after { content: ""; position: absolute; inset: 0; opacity: .16; background: radial-gradient(circle at 88% 15%, #fff 0, transparent 48%); }
.blog-cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.blog-cta-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); line-height: 1.15; }
.blog-cta-sub { color: rgba(255,255,255,.85); font-size: var(--fs-sm); margin-top: 4px; }

.blog-tag { display: inline-flex; align-items: center; background: var(--teal-50); color: var(--brand-strong); border: 1px solid var(--border-brand); border-radius: var(--radius-pill); padding: .4rem .9rem; font-size: var(--fs-sm); font-weight: 500; }

.blog-author-card { display: flex; gap: 1.25rem; align-items: center; padding: 1.5rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); }
.blog-author-bio { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; margin: .5rem 0 .75rem; }
.blog-author-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: var(--fs-sm); color: var(--brand-strong); }

.blog-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1.4rem; }
@media (max-width: 991.98px) { .blog-side { position: static; } }
.blog-side-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); padding: 1.4rem; }
.blog-side-head { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: .4rem; }
.blog-side-item { display: flex; gap: .9rem; padding: .85rem 0; border-top: 1px solid var(--border); }
.blog-side-thumb { width: 64px; height: 56px; flex: none; border-radius: var(--radius-sm); background: var(--mist) center/cover no-repeat; }
.blog-side-cat { display: block; font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--brand-accent); margin-bottom: 3px; }
.blog-side-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); line-height: 1.25; color: var(--text-strong); }
.blog-side-item:hover .blog-side-title { color: var(--brand-strong); }
.blog-side-cat-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem 0; border-top: 1px solid var(--border); color: var(--text-strong); font-weight: 500; font-size: var(--fs-sm); }
.blog-side-cat-row:hover { color: var(--brand-strong); }
.blog-side-count { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-muted); font-size: var(--fs-xs); }

.blog-img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
}

.blog_medico .blog-img{
aspect-ratio:16/8;
}


/* Sezione specialità (home) — card con foto + icona sovrapposta */
.spec-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; height: 100%; text-decoration: none; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.spec-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.spec-card-media { position: relative; height: 132px; background: var(--mist); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.specialita_medico .spec-card-media{
  height: 170px;
}
.spec-card-media img { width: 100%; height: 100%; object-fit: cover; }
.spec-card-media .ph-icon { font-size: 2.4rem; color: var(--teal-300); opacity: .6; }
.spec-card-body { position: relative; padding: 0 15px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
/* Medaglione icona specialità — stesso look su card specialità e card blog */
.spec-card-icon, .blog-card-icon { width: 60px; height: 60px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-accent); color: #fff; font-size: 1.55rem; border: 3px solid #fff; box-shadow: var(--shadow-sm); }
.spec-card-icon { margin-top: -30px; }
.spec-card-body h3 { font-size: var(--fs-base); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0; color: var(--text-strong); }
.spec-card-body p.prestazioni { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; margin: 0; }

/* Card specialità estesa (pagina medico) — foto, icona sovrapposta,
   prestazioni erogate annidate. Non è un link intero: contiene più link. */
.doc-spec-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.doc-spec-media { position: relative; height: 156px; background: var(--mist); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.doc-spec-media img { width: 100%; height: 100%; object-fit: cover; }
.doc-spec-media .ph-icon { font-size: 2.4rem; color: var(--teal-300); opacity: .6; }
.doc-spec-body { position: relative; padding: 0 24px 24px; }
.doc-spec-icon { position: absolute; top: -34px; left: 24px; width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-accent); color: #fff; font-size: 1.7rem; border: 4px solid #fff; box-shadow: var(--shadow-sm); }
.doc-spec-head { display: flex; align-items: center; justify-content: space-between; gap: .875rem; padding-top: 44px; margin-bottom: .5rem; }
.doc-spec-head h3 { font-size: var(--fs-md); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0; color: var(--text-strong); }
.doc-spec-link { display: inline-flex; align-items: center; gap: .375rem; flex: none; font-weight: 600; font-size: var(--fs-xs); color: var(--brand-strong); text-decoration: none; }
.doc-spec-link:hover { color: var(--teal-800); }
.doc-spec-desc { font-size: var(--fs-base); color: var(--text-body); line-height: 1.6; margin: 0 0 1.375rem; }
.doc-spec-label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: .75rem; }
.doc-spec-items { display: flex; flex-direction: column; gap: .625rem; }
.doc-spec-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; background: var(--teal-50); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .875rem 1rem; text-decoration: none; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.doc-spec-item:hover { background: var(--teal-100); border-color: var(--border-brand); }
.doc-spec-item-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--text-strong); display: block; }
.doc-spec-item-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.45; display: block; margin-top: .1875rem; }
.doc-spec-item-time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: .3125rem; flex: none; padding-top: 3px; }

/* Corpo card blog — sostituisce .p-4 per poter ancorare il medaglione icona.
   Padding identico a p-4 (1.5rem): le card senza specialità non cambiano. */
.blog-card-body { position: relative; padding: 1.5rem; }
.blog-card-body.has-spec-icon { padding-top: 2.5rem; }
.blog-card-icon { position: absolute; top: -30px; left: 1.5rem; }

/* Riga prestazione linkabile nell'elenco della pagina servizio */
.prest-row { text-decoration: none; transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.prest-row:hover { box-shadow: var(--shadow-lg); border-color: var(--border-brand); }
.prest-row-go { color: var(--brand); flex: none; align-self: center; font-size: 1.05rem; }

/* ---- Pagina prestazione (dettaglio singola prestazione) ---- */
/* Occhiello hero: link alla specialità di appartenenza */
.prest-hero-spec { display: inline-flex; align-items: center; gap: .5625rem; text-decoration: none; }
.prest-hero-spec-icon { width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.prest-hero-spec:hover .eyebrow { color: #fff; }

/* Card medico compatta ("chi esegue questa prestazione") */
.prest-doc { display: flex; align-items: flex-start; gap: .875rem; height: 100%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: .875rem 1rem; text-decoration: none; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.prest-doc:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.prest-doc + .prest-doc { margin-top: .75rem; }
.prest-doc-photo { width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; background: var(--teal-50); color: var(--teal-300); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.prest-doc-photo img { width: 100%; height: 100%; object-fit: cover; }
.prest-doc-body { min-width: 0; flex: 1; }
.prest-doc-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); color: var(--text-strong); line-height: 1.2; }
.prest-doc-role { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: .1875rem; }
.prest-doc-qual { display: block; font-size: var(--fs-2xs); line-height: 1.45; color: var(--text-faint); margin-top: .375rem; }
.prest-doc-go { color: var(--brand); flex: none; font-size: 1.15rem; }

/* Righe "scheda sintetica" nel box prenotazione */
.prest-fact { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.prest-fact-key { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--text-muted); }
.prest-fact-val { font-size: var(--fs-sm); color: var(--text-strong); text-align: right; }
a.prest-fact-val { color: var(--brand-strong); text-decoration: none; }

/* Card "altre prestazioni dello stesso servizio" */
.prest-rel { display: flex; flex-direction: column; gap: .625rem; height: 100%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: 1.375rem; text-decoration: none; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.prest-rel:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.prest-rel-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.prest-rel-head h3 { font-size: var(--fs-base); font-weight: 700; margin: 0; color: var(--text-strong); }
.prest-rel-time { font-size: var(--fs-xs); color: var(--text-muted); flex: none; }
.prest-rel-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prest-rel-go { margin-top: auto; padding-top: .25rem; color: var(--brand-strong); font-weight: 600; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: .375rem; }

/* Pill/tag "cosa trattiamo" e slot orari */
.pill-tag { display: inline-flex; align-items: center; gap: .5rem; background: var(--teal-50); color: var(--brand-strong); border: 1px solid var(--border-brand); border-radius: var(--radius-pill); padding: .5rem 1rem; font-size: var(--fs-sm); font-weight: 500; }
.slot-chip { display: inline-flex; align-items: center; gap: .5rem; background: var(--teal-50); color: var(--brand-strong); border: 1px solid var(--border-brand); border-radius: var(--radius-pill); padding: .55rem 1.1rem; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; }
.slot-chip:hover { background: var(--brand); color: #fff; }

/* Icona in ring piccolo (contatti / prestazioni) */
.ic-box { width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); background: var(--teal-50); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }

/* Numeri / statistiche */
.stat-num { font-family: var(--font-display); font-weight: 800; color: var(--brand); line-height: 1; }

/* FAQ accordion */
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: none; cursor: pointer; padding: 1.25rem 0; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--text-strong); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-a { color: var(--text-muted); font-size: var(--fs-base); line-height: 1.65; margin: 0 0 1.25rem; max-width: 640px; display: none; }

/* ---------- 7. FOOTER ---------- */
.site-footer { background: var(--ink-900); color: rgba(255,255,255,.72); }
.site-footer .foot-logo { height: 40px; filter: brightness(0) invert(1); opacity: .95; }
.site-footer h5 { color: #fff; font-weight: 700; margin-bottom: .9rem; font-size: var(--fs-base); }
.site-footer a { display: block; color: rgba(255,255,255,.72); font-size: var(--fs-sm); padding: .3rem 0; }
.site-footer a:hover { color: #fff; }
.site-footer .foot-bottom { border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-xs); }

/* ---------- 8. UTILITY ---------- */
.text-brand { color: var(--brand) !important; }
.text-accent { color: var(--brand-accent) !important; }
.bg-mist { background: var(--surface-alt) !important; }
.section-pad { padding: 4.5rem 0; }
.rounded-brand { border-radius: var(--radius-lg); }
.shadow-brand { box-shadow: var(--shadow-md); }

/* ---------- 9. PAGINE INTERNE (hero scuro + dettaglio) ----------
   Estratte dagli stili inline ripetuti di servizi/medici/blog e delle pagine
   di dettaglio (servizio, medico). Valori uniformati tra pagine simili. */

/* Contenitore interno di ogni page-hero: padding uniforme + sopra il ::after */
.page-hero-inner { position: relative; z-index: 2; padding: 3.25rem 0 3.75rem; }

/* Breadcrumb dentro un hero scuro (verde) */
.hero-breadcrumb { font-size: var(--fs-sm); }
.hero-breadcrumb a { color: rgba(255,255,255,.85); }
.hero-breadcrumb a:hover { color: #fff; }
.hero-breadcrumb .sep { color: rgba(255,255,255,.6); }
.hero-breadcrumb .current { color: #fff; }

/* Titolo e lead bianchi dei page-hero (il colore del lead resta .text-white-50) */
.page-hero-title { color: #fff; font-size: clamp(2.6rem,5.5vw,3.5rem); line-height: 1.05; letter-spacing: -.02em; max-width: 760px; }
.page-hero-lead { font-size: var(--fs-md); line-height: 1.65; max-width: 620px; }

/* Hero delle pagine di dettaglio (servizio / medico): cerchio icona + titolo */
.detail-hero-icon { width: 76px; height: 76px; flex: none; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; }
.detail-hero-title { color: #fff; font-size: var(--fs-3xl); line-height: 1.03; letter-spacing: -.02em; }

/* Hero medico: foto e sottotitolo */
.detail-hero-photo { width: 220px; height: 276px; flex: none; border-radius: var(--radius-xl); overflow: hidden; }
.detail-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero-photo--filled { border: 4px solid rgba(255,255,255,.22); box-shadow: var(--shadow-xl); }
.detail-hero-photo--empty { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); color: #fff; }
.detail-hero-subtitle { font-size: var(--fs-md); line-height: 1.6; max-width: 520px; opacity: .92; }
.btn-hero-outline { color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn-hero-outline:hover { color: #fff; background: rgba(255,255,255,.12); }

/* Corpo delle pagine di dettaglio */
.section-inner { padding: 3.25rem 0 3rem; }
.detail-lead { font-size: var(--fs-md); line-height: 1.65; /*max-width: 640px;*/ }
/* Varianti di dimensione del titolo di sezione (override del 2.25rem di base) */
.section-title-sm { font-size: var(--fs-lg); }
.section-title-md { font-size: var(--fs-xl); }
.section-title-lg { font-size: var(--fs-2xl); }
.sticky-side { position: sticky; top: 96px; }

/* Box "Prenota una visita" (sidebar delle pagine di dettaglio) */
.booking-title { font-family: var(--font-display); font-size: var(--fs-md); color: var(--text-strong); }
.booking-tel { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--brand-strong); font-size: var(--fs-sm); }
.booking-contact { font-size: var(--fs-sm); color: var(--text-body); }

/* Banda CTA verde arrotondata (fondo pagine servizi / medici) */
.cta-band { padding: 3rem 2.75rem; border-radius: var(--radius-2xl); }

/* Blocco intestazione di sezione, centrato */
.section-head { max-width: 620px; }

/* Icona degli stati vuoti / "nessun risultato" */
.empty-icon { font-size: 1.8rem; opacity: .5; }

/* Testo nei colori-token del brand (diversi dai .text-* di Bootstrap) */
.text-soft { color: var(--text-muted); }
.text-strong { color: var(--text-strong); }
.text-teal { color: var(--teal-300); }

/* Riquadro placeholder teal (griglia "nuova sede" in home) */
.tile-placeholder { min-height: 182px; background: var(--teal-50); color: var(--teal-300); }

/* ---------- 10. PAGINA CHI SIAMO ---------- */
/* Foto grande "la persona al centro" */
.about-media { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; background: var(--teal-50); }
.about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gallery della struttura — riquadri quadrati, zoom leggero all'hover */
.gallery-tile { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1/1; background: var(--teal-50); box-shadow: var(--shadow-xs); }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease-out); }
.gallery-tile:hover img { transform: scale(1.05); }

/* Card orari di segreteria (sfondo brand-gradient, testo bianco) */
.orari-card { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 1.9rem 1.75rem; color: #fff; }
.orari-card h3 { color: #fff; font-size: var(--fs-md); }
.orari-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: var(--fs-sm); }
.orari-row .day { font-weight: 500; }
.orari-row .time { font-family: var(--font-mono); color: rgba(255,255,255,.92); }
.orari-tel { display: flex; align-items: center; justify-content: center; gap: .5rem; color: #fff; font-size: var(--fs-sm); font-weight: 500; }
.orari-tel:hover { color: #fff; opacity: .85; }

/* Chevron dell'accordion FAQ (ruota da > a v quando la voce è aperta) */
.faq-q .faq-ic { display: inline-flex; flex: none; color: var(--brand); font-size: 1.25rem; }

/* ---------- 11. PAGINA CONTATTI ---------- */
/* Card rapide (chiama / scrivi / prenota) — icona in ring + label + valore */
.contact-quick { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: 1.375rem 1.5rem; height: 100%; text-decoration: none; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.contact-quick:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.contact-quick-label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.contact-quick-value { color: var(--text-strong); font-weight: 600; }

/* Icona di conferma "richiesta inviata" (cerchio verde success) */
.contact-success-ic { width: 68px; height: 68px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--success-100); color: var(--success-600); font-size: 2rem; }

/* Alert di errore del modulo (tono danger del design system) */
.alert-brand-danger { background: var(--danger-100); color: var(--danger-600); border: 1px solid rgba(204,78,58,.24); border-radius: var(--radius-md); padding: .75rem 1rem; font-size: var(--fs-sm); font-weight: 500; }

/* ---------- 12. PAGINA SERVIZIO (dettaglio specialità) ---------- */
/* Immagine della specialità in cima al corpo: banner arrotondato, proporzioni
   costanti (le immagini dal DB variano) con crop centrato. */
.spec-detail-img { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 16 / 9; background: var(--teal-50); }
.spec-detail-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   MAPPA CONTATTI (MapLibre GL + OpenFreeMap, tile vettoriali)
   Lo stile "positron" viene ricolorato in JS (main.js) nei verdi del
   brand su fondo bianco: essendo vettoriale il testo resta nitido e i
   colori pieni. Qui restano solo contenitore, pin e popup.
   ============================================================ */
.cmsa-map { width: 100%; height: 100%; min-height: 420px; background: #fff; }
/* Controlli (zoom) coerenti col design */
.cmsa-map .maplibregl-ctrl-group { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.cmsa-map .maplibregl-ctrl-group button { width: 32px; height: 32px; }
.cmsa-map .maplibregl-ctrl-group button + button { border-top: 1px solid var(--border); }

/* Pin a goccia nel colore del brand (con anello pulsante leggero).
   Wrapper esterno = box posizionato da MapLibre; la goccia ruotata è
   il .cmsa-pin-dot interno (così il transform di MapLibre non la annulla). */
.cmsa-pin { position: relative; width: 30px; height: 38px; cursor: pointer; }
.cmsa-pin-dot {
  position: absolute; top: 0; left: 0; display: block; width: 30px; height: 30px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--brand); border: 3px solid #fff;
  box-shadow: var(--shadow-md);
}
.cmsa-pin-dot::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: #fff;
}
/* Anello che pulsa dietro al pin */
.cmsa-pin-dot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--brand); opacity: .35;
  animation: cmsa-pin-pulse 2.4s ease-out infinite;
}
@keyframes cmsa-pin-pulse {
  0%   { transform: translate(-50%, -50%) scale(.6); opacity: .45; }
  70%  { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cmsa-pin-dot::before { animation: none; } }

/* Popup del pin coerente col design (card morbida, link brand) */
.cmsa-map .maplibregl-popup-content { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: .85rem 1rem; }
.cmsa-map .maplibregl-popup-close-button { color: var(--text-muted); font-size: 1.15rem; padding: 0 .35rem; }
.cmsa-map .maplibregl-popup-close-button:hover { background: none; color: var(--text-strong); }
.cmsa-popup { display: flex; flex-direction: column; gap: .25rem; }
.cmsa-popup strong { color: var(--text-strong); font-size: var(--fs-base); }
.cmsa-popup span { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.4; }
.cmsa-popup a { display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; color: var(--text-link); font-weight: 600; font-size: var(--fs-xs); text-decoration: none; }
.cmsa-popup a:hover { color: var(--text-link-hover); }