@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
  --bs-primary: #153e79;
  --ds-accent: #0098d3;
  --bs-body-font-family: 'Inter', system-ui, sans-serif;
  --ds-heading-font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --bs-body-color: #1a1a1a;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --ds-ink-700: #333;
  --ds-ink-600: #606264;
  --ds-ink-500: #595959;
  --ds-surface-50: #f8f9fa;
  --ds-border: #e0e0e0;
  --ds-dark-band: #0e2e5c;
  --ds-placeholder: #ccc;
  --ds-diagonal: #bbb;
  --header-h: 88px;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { padding-top: var(--header-h); }
body { overflow-x: clip; }
h1, h2, h3 { overflow-wrap: break-word; }
.review-badge { max-width: 100%; }
a { text-decoration: none; color: var(--bs-primary); }
a:hover { color: var(--ds-accent); }

/* Bootstrap hardcodes its own hex values inside .btn-primary/.btn-outline-primary
   rather than referencing --bs-primary, so we override them explicitly here */
.btn-primary { --bs-btn-bg: var(--ds-accent); --bs-btn-border-color: var(--ds-accent); --bs-btn-hover-bg: #0086ba; --bs-btn-hover-border-color: #0086ba; --bs-btn-active-bg: #007aa9; --bs-btn-active-border-color: #007aa9; --bs-btn-disabled-bg: var(--ds-accent); --bs-btn-disabled-border-color: var(--ds-accent); --bs-btn-focus-shadow-rgb: 0,152,211; }
.btn-outline-primary { --bs-btn-color: var(--ds-accent); --bs-btn-border-color: var(--ds-accent); --bs-btn-hover-bg: var(--ds-accent); --bs-btn-hover-border-color: var(--ds-accent); --bs-btn-active-bg: var(--ds-accent); --bs-btn-active-border-color: var(--ds-accent); --bs-btn-disabled-color: var(--ds-accent); --bs-btn-disabled-border-color: var(--ds-accent); --bs-btn-focus-shadow-rgb: 0,152,211; }
.container-ds { max-width: 1280px; padding-left: 40px; padding-right: 40px; }

/* Buttons: square, 44px */
.btn { --bs-btn-border-radius: 0; --bs-btn-font-weight: 600; --bs-btn-font-size: 14px; height: 44px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }
.btn-outline-dark { --bs-btn-color: #1a1a1a; --bs-btn-border-color: #1a1a1a; }
.btn-outline-primary { background: var(--ds-surface-50); }
.btn-emergency { --bs-btn-color: var(--bs-primary); --bs-btn-bg: #ffc107; --bs-btn-border-color: #ffc107; --bs-btn-hover-color: var(--bs-primary); --bs-btn-hover-bg: #f5b301; --bs-btn-hover-border-color: #f5b301; --bs-btn-active-color: var(--bs-primary); --bs-btn-active-bg: #e0a300; --bs-btn-active-border-color: #e0a300; --bs-btn-focus-shadow-rgb: 255,193,7; font-weight: 700; }

/* Type */
.eyebrow { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--bs-primary); font-weight: 600; }
h1, h2, h3, h4, h5, h6, .display-ds, .h2-ds, .navbar-brand { font-family: var(--ds-heading-font-family); }
h1, h2, h3, h4, h5, h6, .display-ds, .h2-ds { color: var(--bs-primary); }
.display-ds { font-size: 60px; font-weight: 800; line-height: 1.05; letter-spacing: -1px; }
.h2-ds { font-size: 36px; font-weight: 800; line-height: 1.2; text-wrap: balance; }
.lead-ds { font-size: 18px; line-height: 1.6; color: var(--ds-ink-600); max-width: 540px; }
.text-ds-muted { color: var(--ds-ink-600); }
.rule { display: block; width: 40px; height: 2px; background: var(--bs-primary); }

/* Placeholder */
.placeholder-img { position: relative; width: 100%; background-color: var(--ds-placeholder); display: flex; align-items: center; justify-content: center;
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--ds-diagonal) calc(50% - .5px), var(--ds-diagonal) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom left, transparent calc(50% - .5px), var(--ds-diagonal) calc(50% - .5px), var(--ds-diagonal) calc(50% + .5px), transparent calc(50% + .5px)); }
.placeholder-img span { padding: 6px 12px; border-radius: 2px; background: var(--ds-placeholder); font-size: 14px; font-weight: 600; line-height: 1; color: var(--ds-ink-700); }
.placeholder-img img, .placeholder-img iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }

/* Navbar */
.navbar { box-shadow: inset 0 -1px 0 var(--ds-border); min-height: var(--header-h); padding: 0; }
.navbar-brand img { flex-shrink: 0; }
.navbar .navbar-brand img { height: calc(var(--header-h) - 12px); width: auto; }
.navbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: #1a1a1a; }
.logo-mark { width: 24px; height: 24px; background: var(--bs-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; border-radius: 4px; }
.navbar .nav-link { font-size: 14px; font-weight: 500; color: var(--ds-ink-700); }
.navbar .nav-link:hover { color: var(--bs-primary); }
.navbar-toggler { border: 0; width: 44px; height: 44px; padding: 0; }
.navbar-toggler:focus { box-shadow: none; }
@media (max-width: 991.98px) {
  .navbar-collapse { padding: 8px 0 20px; }
  .navbar .nav-link { font-size: 15px; font-weight: 600; color: #1a1a1a; padding: 14px 0; box-shadow: inset 0 -1px 0 #eee; }
  .navbar .nav-cta { width: 100%; margin-top: 16px; }
}

/* Sections */
.section-muted { background: var(--ds-surface-50); }
.hero { padding: 56px 0 72px; }
.hero .placeholder-img { height: 408px; }
.trust { font-size: 13px; font-weight: 600; }
.feature-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(0,152,211,.12); display: flex; align-items: center; justify-content: center; color: var(--ds-accent); }
.feature.feature-emergency .feature-icon { background: var(--ds-accent); color: #fff; }
.feature.feature-emergency h3 { color: var(--bs-primary); }
.feature h3 { font-size: 18px; font-weight: 700; }
.feature p { font-size: 13px; line-height: 1.8; color: var(--ds-ink-600); }
.banner { background-color: var(--ds-dark-band); background-image: linear-gradient(rgba(14,46,92,.82), rgba(14,46,92,.82)), url('../img/banner-cta.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.banner .container-ds { padding-top: 96px; padding-bottom: 96px; }
.banner h3 { color: #fff; font-size: 28px; font-weight: 800; line-height: 1.25; }
.clinic .placeholder-img { height: 282px; }
.clinic p { font-size: 14px; line-height: 1.75; color: var(--ds-ink-600); max-width: 520px; }
.card-ds { background: #fff; box-shadow: inset 0 0 0 1px var(--ds-border); border: 0; }
.person .placeholder-img { height: 100%; min-height: 380px; }
.person-role { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ds-ink-500); font-weight: 600; }
.stars { color: #f5b301; letter-spacing: 2px; }
.review-badge { background: #fff; box-shadow: inset 0 0 0 1px var(--ds-border); color: var(--bs-body-color); transition: box-shadow .15s, transform .15s; }
.review-badge:hover { box-shadow: inset 0 0 0 1px var(--bs-primary); transform: translateY(-2px); color: var(--bs-body-color); }
.review-badge-score { font-family: var(--ds-heading-font-family); font-size: 40px; font-weight: 800; color: var(--bs-primary); background: rgba(0,152,211,.12); width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.map .placeholder-img { height: 406px; }
.map-consent { background-color: #e9eef3; background-image: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), url('../img/mappa-anteprima.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.map-consent-inner { max-width: 420px; background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(21,62,121,.15); }
.privacy h2 { font-size: 22px; font-weight: 800; margin-top: 40px; }
.privacy p, .privacy li { font-size: 15px; line-height: 1.75; color: var(--ds-ink-700); }
.privacy mark { background: #fff3bf; padding: 0 4px; }

/* Footer */
.footer { box-shadow: inset 0 1px 0 var(--ds-border); font-size: 13px; }
.footer-bottom { box-shadow: inset 0 1px 0 var(--ds-border); font-size: 12px; }
.footer-bottom a { text-decoration: underline; color: var(--ds-ink-600); }
.socials a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--ds-ink-700); box-shadow: inset 0 0 0 1px var(--ds-border); transition: color .15s, box-shadow .15s; }
.socials a:hover { color: var(--bs-primary); box-shadow: inset 0 0 0 1px var(--bs-primary); }

/* Back to top */
.to-top { position: fixed; right: 32px; bottom: 32px; z-index: 1030; width: 44px; height: 44px; padding: 0; opacity: 0; pointer-events: none; transition: opacity .18s; }
.to-top.visible { opacity: 1; pointer-events: auto; }
.toast { border-radius: 0; background: #1a1a1a; color: #fff; }

@media (max-width: 991.98px) { :root { --header-h: 72px; } }
@media (max-width: 991.98px) { .hero { padding: 32px 0 48px; } }
/* Immagini responsive: sotto i 992px niente altezza fissa, si mantiene la proporzione originale (nessun ritaglio) */
@media (max-width: 991.98px) {
  .hero .placeholder-img, .clinic .placeholder-img { height: auto; }
  .hero .placeholder-img img { height: auto; aspect-ratio: 576 / 408; }
  .clinic .placeholder-img img { height: auto; aspect-ratio: 576 / 282; }
}
@media (max-width: 575.98px) {
  .container-ds .row.g-5 { --bs-gutter-x: 2.5rem; }
  .review-badge { padding: 20px !important; gap: 16px !important; flex-wrap: wrap; justify-content: center; }
  .review-badge-score { width: 64px; height: 64px; font-size: 32px; flex-shrink: 0; }
  .banner .btn-emergency { white-space: normal; height: auto; min-height: 44px; padding: 10px 20px; text-align: center; }
  .banner .container-ds { padding-top: 64px; padding-bottom: 64px; }
  .container-ds { padding-left: 20px; padding-right: 20px; }
  .display-ds { font-size: 44px; }
  .btn-stack .btn { width: 100%; }
}