/* ============================================================
   MEDICAL LIFE — Design system (foglio unico)
   Tesi: "la clinica disegnata come uno strumento".
   Monolinea rossa su bianco puro, tipografia da segnaletica.
   Il rosso #ED1C24 è campionato dal logo reale.

   Ordine del foglio:
     1. Token          — colore, tipo, spazio, forma, movimento
     2. Base           — reset mirato, tipografia, utilità
     3. Componenti     — header, menu, hero, card, footer, barra azioni
     4. Movimento      — stati di partenza e preferenze ridotte
   ============================================================ */

:root {
  /* --- Superfici ------------------------------------------------
     Bianco puro, non avorio. Il pubblico è presbite e legge su
     telefono alla luce del giorno: la leggibilità batte l'atmosfera.
     Il calore del marchio lo porta il rosso, non il fondo.         */
  --bg:            oklch(1 0 0);
  --surface:       oklch(0.968 0.004 27.5);
  --surface-2:     oklch(0.936 0.006 27.5);

  /* --- Inchiostro ---------------------------------------------- */
  --ink:           oklch(0.185 0.012 27.5);   /* titoli e corpo      */
  --ink-2:         oklch(0.442 0.012 27.5);   /* secondario, 6.9:1   */
  --ink-3:         oklch(0.556 0.010 27.5);   /* terziario, 4.6:1    */
  --ink-inv:       oklch(1 0 0);

  /* --- Rosso del marchio ---------------------------------------
     Quattro gradi, uno per funzione. Il rosso puro del logo resta
     per i segni grafici e il display; il testo e i pulsanti usano
     i gradi più profondi perché il contrasto deve reggere.         */
  --red:           oklch(0.603 0.235 27.0);   /* #ED1C24 esatto, campionato dal logo.
                                                 Solo segni grafici: su bianco sta a
                                                 4.0:1, sopra la soglia 3:1 dei
                                                 componenti ma sotto quella del testo. */
  --red-action:    oklch(0.520 0.213 27.0);   /* fondo pulsante, bianco a 6.1:1       */
  --red-hover:     oklch(0.462 0.192 27.0);
  --red-ink:       oklch(0.440 0.185 27.0);   /* rosso come testo, 8.4:1 su bianco    */
  --red-deep:      oklch(0.335 0.132 27.0);   /* sezione annegata, bianco a 12.7:1    */
  --red-wash:      oklch(0.967 0.022 27.0);
  --red-line:      oklch(0.880 0.062 27.0);

  /* --- Verde, secondo colore del marchio -----------------------
     #005548 esatto. Su bianco sta a 8.8:1 e col bianco sopra pure:
     è l'unico altro colore del sistema che può fare da testo E da
     fondo di un pulsante senza trucchi. Si divide il lavoro col
     rosso per ruolo, non per gusto: il rosso è l'azione (chiamare),
     il verde è l'orientamento (titoli di sezione, informazioni di
     servizio, seconde strade). Due colori che fanno la stessa cosa
     sono un colore sprecato e un visitatore confuso.             */
  --verde:         #005548;
  --verde-hover:   oklch(0.300 0.062 172);
  --verde-ink:     #005548;
  --verde-deep:    oklch(0.255 0.050 172);
  --verde-wash:    oklch(0.967 0.016 172);
  --verde-line:    oklch(0.884 0.044 172);

  /* Il grigio del logo (#A4A5A1) non è un token: su bianco sta a
     2.7:1 e qualcuno prima o poi lo userebbe per del testo. La
     struttura usa --line e --line-strong, il testo usa la scala
     dell inchiostro. */
  --line:          oklch(0.898 0.005 27.0);
  --line-strong:   oklch(0.800 0.007 27.0);

  --focus:         oklch(0.520 0.213 27.0);

  /* --- Tipografia ----------------------------------------------
     Archivo (grotesque variabile, asse larghezza 62→125) fa da
     voce di segnaletica: display compresso, etichette strette.
     Atkinson Hyperlegible porta il corpo del testo: disegnato dal
     Braille Institute per massimizzare la distinzione dei caratteri
     negli ipovedenti. Scelta funzionale, non stilistica.           */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --t-display: clamp(2.4rem, 5.4vw, 4.25rem);
  --t-h1:      clamp(2rem, 4.4vw, 3.25rem);
  --t-h2:      clamp(1.7rem, 3.8vw, 2.7rem);
  --t-h3:      clamp(1.25rem, 2.2vw, 1.6rem);
  --t-lead:    clamp(1.125rem, 1.5vw, 1.375rem);
  --t-body:    clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;

  --lh-tight:  0.94;
  --lh-head:   1.08;
  --lh-body:   1.62;

  /* --- Spazio --------------------------------------------------- */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;
  --section:   clamp(3.75rem, 8.5vw, 8rem);
  --gutter:    clamp(1.125rem, 4vw, 3rem);
  --measure:   66ch;

  --wrap:      78rem;
  --wrap-tight: 56rem;

  /* --- Forma ---------------------------------------------------
     Angoli quasi vivi. Lo strumento chirurgico non è stondato.     */
  --r1: 2px;  --r2: 4px;  --r3: 8px;

  /* --- Piani ---------------------------------------------------- */
  --z-base: 1;  --z-dropdown: 10;  --z-sticky: 20;  --z-actionbar: 30;
  --z-header: 40;  --z-backdrop: 50;  --z-modal: 60;  --z-toast: 70;

  /* --- Movimento ------------------------------------------------ */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* out-quint       */
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --d-fast:    160ms;
  --d-base:    280ms;
  --d-slow:    520ms;

  /* --- Barra azioni mobile: altezza riservata al corpo ----------- */
  --actionbar-h: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; }
}

/* ============================================================
   2. BASE, LAYOUT, COMPONENTI
   ============================================================ */

/* ---------- Reset mirato ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

:where(a) { color: inherit; }

/* Focus visibile ovunque: il pubblico include chi naviga da tastiera */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r1);
}

/* Il rosso pieno del logo lascerebbe il testo selezionato a 3.9:1.
   La selezione usa il grado del pulsante, che sta a 6.1:1. */
::selection { background: var(--red-action); color: #fff; }

/* ---------- Tipografia ---------- */
.d-display, .d-h1, .d-h2, .d-h3, .d-label {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}

.d-display {
  font-size: var(--t-display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.d-h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  font-stretch: 108%;
  line-height: var(--lh-head);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.d-h2 {
  font-size: var(--t-h2);
  font-weight: 750;
  font-stretch: 105%;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.d-h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.d-label {
  font-size: var(--t-xs);
  font-weight: 650;
  font-stretch: 86%;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
  text-wrap: pretty;
}
/* Due occhielli di seguito sono due paragrafi, non uno lungo:
   senza questo margine si leggono come un blocco unico. */
.lead + .lead { margin-top: var(--s4); }
.prose { max-width: var(--measure); text-wrap: pretty; }
.prose p + p { margin-top: var(--s4); }
.prose strong { font-weight: 700; color: var(--ink); }

.u-red { color: var(--red-ink); }
.u-center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s4); top: -4rem; z-index: var(--z-toast);
  background: var(--ink); color: var(--ink-inv);
  padding: var(--s3) var(--s5); border-radius: var(--r2);
  transition: top var(--d-fast) var(--ease);
}
.skip-link:focus { top: var(--s4); }

/* ---------- Impalcatura ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--tight { max-width: var(--wrap-tight); }
.section { padding-block: var(--section); }
.section--snug { padding-block: calc(var(--section) * 0.62); }

.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s3);
  min-height: 3.25rem;
  padding: 0.9rem 1.5rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r2);
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; width: 1.25em; height: 1.25em; }

/* Secondo pulsante pieno: stessa forma, altro ruolo. Sta dove la
   strada alternativa è legittima quanto la prima (scrivere invece
   di chiamare, venire invece di prenotare). */
.btn--verde { background: var(--verde); color: #fff; }
.btn--verde:hover { background: var(--verde-hover); }
.btn--primary { background: var(--red-action); color: #fff; }
.btn--primary:hover { background: var(--red-hover); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--ink); background: var(--surface); }

.btn--onred { background: #fff; color: var(--red-deep); }
.btn--onred:hover { background: var(--red-wash); }

.btn--ghostred { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.45); }
.btn--ghostred:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); }

.btn--ondark { background: #fff; color: var(--ink); }
.btn--ondark:hover { background: var(--surface-2); }

.btn--wide { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Link testuale con sottolineatura che cresce */
.tlink {
  font-family: var(--font-display);
  font-weight: 650;
  text-decoration: none;
  color: var(--red-ink);
  border-bottom: 2px solid var(--red-line);
  padding-bottom: 2px;
  transition: border-color var(--d-fast) var(--ease);
}
.tlink:hover { border-color: var(--red-ink); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__in {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 4.5rem;
}
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand img { width: auto; height: 2.875rem; }

.nav { display: none; align-items: center; gap: clamp(0.7rem, 1.3vw, 1.4rem); }
/* Le voci non vanno mai a capo: una voce di menu spezzata su due
   righe alza l'intestazione e sposta tutto il resto. Se non ci
   stanno, è il menu a dover sparire, non il testo a piegarsi. */
.nav a { white-space: nowrap; }
.nav a {
  font-family: var(--font-display);
  font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; color: var(--ink);
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--d-fast) var(--ease);
}
.nav a:hover { border-color: var(--red); }
.nav a[aria-current="page"] { border-color: var(--red); }

.header-call {
  display: none; align-items: center; gap: var(--s2); white-space: nowrap;
  font-family: var(--font-display); font-weight: 750; font-size: 1.0625rem;
  text-decoration: none; color: var(--ink);
  padding: 0.625rem 1rem;
  border: 2px solid var(--ink); border-radius: var(--r2);
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.header-call:hover { background: var(--ink); color: var(--ink-inv); }
.header-call svg { width: 1.1em; height: 1.1em; }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  background: transparent; border: 2px solid var(--line-strong);
  border-radius: var(--r2); cursor: pointer;
}
.burger svg { width: 1.5rem; height: 1.5rem; }

/* La soglia è 78rem, non 64: con otto voci più il numero di
   telefono, a 1024 px il menu si spezzava su due righe. Sotto
   questa larghezza il menu a tendina è semplicemente migliore. */
@media (min-width: 78rem) {
  .nav { display: flex; }
  .header-call { display: inline-flex; }
  .burger { display: none; }
}

/* Menu mobile */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-modal);
  width: 100%; max-width: none; max-height: none; height: 100%;
  margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--ink);
}
.mobile-menu::backdrop { background: rgb(0 0 0 / 0.55); }
.mobile-menu__in { display: flex; flex-direction: column; height: 100%; padding: var(--gutter); }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s5); }
.mobile-menu__list { display: flex; flex-direction: column; overflow-y: auto; }
.mobile-menu__list a {
  display: block; padding: var(--s4) 0;
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  letter-spacing: -0.02em; text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__foot { margin-top: auto; padding-top: var(--s5); display: grid; gap: var(--s3); }

/* ============================================================
   BARRA AZIONI MOBILE — il dispositivo di conversione principale
   ============================================================ */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-actionbar);
  display: grid; grid-template-columns: 1.35fr 1fr 1fr;
  background: var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 28px rgb(0 0 0 / 0.18);
}
.actionbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 4.5rem; padding: 0.5rem 0.25rem;
  color: #fff; text-decoration: none;
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 650;
  font-stretch: 92%;
  border-right: 1px solid rgb(255 255 255 / 0.16);
}
.actionbar a:last-child { border-right: 0; }
.actionbar a svg { width: 1.5rem; height: 1.5rem; }
.actionbar__call { background: var(--red-action); }
.actionbar__call:hover { background: var(--red-hover); }

body { padding-bottom: var(--actionbar-h); }
@media (min-width: 78rem) {
  .actionbar { display: none; }
  body { padding-bottom: 0; }
}

/* ============================================================
   HERO — la fotografia dell'accettazione a tutto campo, con una
   velatura sopra. La velatura non è decorativa: senza, il titolo
   bianco starebbe su pareti bianche. È un gradiente orientato: la
   sala si vede bene a destra e resta leggibile anche sotto al
   testo. Il punto più chiaro sotto al titolo è allo 0.78, che
   sulla parete più accesa della fotografia tiene comunque il
   bianco sopra 8:1 — molto oltre la soglia AA.
   ============================================================ */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 52%; }

/* Velatura. Verticale su telefono (il testo sta in alto),
   orizzontale da 48rem in su (il testo sta a sinistra). */
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom,
      oklch(0.17 0.014 27.5 / 0.86) 0%,
      oklch(0.17 0.014 27.5 / 0.80) 48%,
      oklch(0.17 0.014 27.5 / 0.50) 80%,
      oklch(0.17 0.014 27.5 / 0.34) 100%);
}
@media (min-width: 48rem) {
  .hero__veil {
    background:
      linear-gradient(to right,
        oklch(0.17 0.014 27.5 / 0.86) 0%,
        oklch(0.17 0.014 27.5 / 0.78) 40%,
        oklch(0.17 0.014 27.5 / 0.42) 70%,
        oklch(0.17 0.014 27.5 / 0.16) 100%);
  }
}

/* L altezza è tarata perché su un portatile da 900 px entri tutto
   il blocco, targa dell indirizzo compresa: se la targa si taglia
   sembra un errore, non una piega. */
.hero__in {
  position: relative;
  padding-block: clamp(2rem, 4vw, 3.25rem);
  min-height: clamp(27rem, 66vh, 38rem);
  display: flex; align-items: center;
}
.hero__textin { max-width: 36rem; }

/* Su fondo scuro il testo va alleggerito di interlinea: il bianco
   su nero legge più sottile di quanto sia. */
.hero .d-display {
  color: #fff;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.98;
  margin-bottom: var(--s5);
}
.hero__lead { color: rgb(255 255 255 / 0.9); line-height: 1.55; margin-bottom: var(--s6); }
.hero .btn-row { margin-bottom: var(--s6); }

/* Il pulsante secondario sul fondo scuro diventa bianco in
   contorno: il btn--outline normale ha il bordo grigio chiaro e
   qui sparirebbe. */
.hero .btn--outline { color: #fff; border-color: rgb(255 255 255 / 0.55); background: transparent; }
.hero .btn--outline:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); }

/* Targa piena in basso: dove sei, che per questo pubblico è un
   argomento di conversione quanto la procedura. */
.hero__place {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s3);
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  background: var(--red-action); color: #fff;
  font-family: var(--font-display); font-size: var(--t-sm);
  font-weight: 700; font-stretch: 92%; line-height: 1.35;
}
.hero__place svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* La riga di chiave: stessa famiglia, metà corpo, filetto rosso
   davanti. Sta dentro l H1 per il peso che i motori le danno, ma
   non compete visivamente con la promessa che la segue. */
.hero__kw {
  display: flex; align-items: center; gap: var(--s3);
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  font-weight: 700; font-stretch: 88%; letter-spacing: 0;
  line-height: 1.2; color: #fff;
  margin-bottom: var(--s4);
}
.hero__kw::before { content: ""; width: 1.75rem; height: 2px; background: var(--red); flex: none; }

.hero__kicker {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
  font-stretch: 88%; color: #fff;
  margin-bottom: var(--s4);
}
.hero__kicker::before {
  content: ""; width: 1.75rem; height: 2px; background: var(--red); flex: none;
}
.hero__lead { margin-bottom: var(--s6); }
.hero .btn-row { margin-bottom: var(--s5); }

.hero__assure {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  font-size: var(--t-sm); color: rgb(255 255 255 / 0.88);
}
.hero__assure li { display: flex; align-items: center; gap: var(--s2); }
/* Le spunte restano rosse: su questo fondo il rosso del marchio
   sta a 5.4:1, e sono segni, non testo. */
.hero__assure svg { width: 1.0625rem; height: 1.0625rem; color: var(--red); flex: none; }

/* ============================================================
   FIGURA ANATOMICA — l immagine del sito, in monolinea come le
   lettere del logo
   ============================================================ */
.anatomy { position: relative; }
.anatomy__svg { width: 100%; max-width: 25rem; margin-inline: auto; height: auto; }
.anatomy__fig { stroke: var(--ink-3); stroke-width: 2.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.anatomy__joint { fill: var(--bg); stroke: var(--ink-3); stroke-width: 2.75; }

.anatomy__hit { cursor: pointer; }
/* Bersaglio di tocco generoso, invisibile: i cerchi rossi sono
   piccoli per non appesantire il disegno, ma il dito ne trova 52. */
.anatomy__hit .hit-target { fill: transparent; }
.anatomy__hit .hit-ring {
  fill: rgb(237 28 36 / 0.07);
  stroke: var(--red); stroke-width: 2;
  transition: fill var(--d-base) var(--ease), stroke-width var(--d-base) var(--ease);
}
.anatomy__hit .hit-dot { fill: var(--red); }
.anatomy__hit:hover .hit-ring,
.anatomy__hit[data-active="true"] .hit-ring { fill: rgb(237 28 36 / 0.24); stroke-width: 3; }
.anatomy__hit:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.anatomy__tag {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  font-stretch: 88%; fill: var(--ink-2);
  transition: fill var(--d-base) var(--ease);
}
.anatomy__hit[data-active="true"] .anatomy__tag,
.anatomy__hit:hover .anatomy__tag { fill: var(--red-ink); }
.anatomy__lead { stroke: var(--line); stroke-width: 1.25; }

/* ============================================================
   SELETTORE ZONA — "Dove hai male?"
   ============================================================ */
.zones { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.zones__head { margin-bottom: var(--s6); }

/* La figura sta qui, accanto ai suoi stessi bottoni: toccare il
   corpo e toccare l'etichetta sono due strade allo stesso stato.
   Nella hero era decorazione; qui è la navigazione dichiarata
   dal principio di progetto. */
.zones__layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60rem) {
  .zones__layout { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); align-items: start; }
}
.zones__fig { display: none; }
@media (min-width: 60rem) { .zones__fig { display: block; position: sticky; top: calc(var(--header-h, 5rem) + var(--s5)); } }

.zones__chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 3rem; padding: 0.625rem 1.125rem;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-display); font-size: 1rem; font-weight: 650;
  border: 2px solid var(--line-strong); border-radius: var(--r2);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--red-action); border-color: var(--red-action); color: #fff; }

.zones__results { display: grid; gap: var(--s4); }
@media (min-width: 48rem) { .zones__results { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }

.zcard {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r2);
  text-decoration: none;
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.zcard:hover { border-color: var(--ink); box-shadow: 0 6px 24px rgb(24 12 12 / 0.08); }
.zcard__name { font-family: var(--font-display); font-weight: 750; font-size: 1.125rem; letter-spacing: -0.015em; }
.zcard__meta { font-size: var(--t-sm); color: var(--ink-2); }
.zcard__go { margin-top: auto; padding-top: var(--s3); font-size: var(--t-sm); font-weight: 700; color: var(--verde-ink); font-family: var(--font-display); }
.zones__note { font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s5); }

/* ============================================================
   RAIL DI PROVA — una riga compressa, non le card con numerone
   ============================================================ */
.proof__list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
@media (min-width: 48rem) { .proof__list { grid-template-columns: repeat(4, 1fr); } }
.proof__item { background: var(--bg); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s1); }
.proof__k { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 750; letter-spacing: -0.015em; color: var(--verde-ink); }
.proof__v { font-size: var(--t-sm); color: var(--ink-2); }

/* ============================================================
   SEZIONE ANNEGATA — microchirurgia percutanea.
   L unico momento di art direction totale del sito.
   ============================================================ */
.drench { background: var(--red-deep); color: #fff; }
.drench .lead { color: rgb(255 255 255 / 0.84); }
.drench__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 64rem) { .drench__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); } }
.drench__kicker {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
  font-stretch: 88%; color: rgb(255 255 255 / 0.72); margin-bottom: var(--s4);
}
.drench__kicker::before { content: ""; width: 1.75rem; height: 2px; background: rgb(255 255 255 / 0.6); flex: none; }
.drench .d-h1 { margin-bottom: var(--s5); }
.drench__facts { display: grid; gap: 1px; background: rgb(255 255 255 / 0.24); margin-block: var(--s7) var(--s6); border-radius: var(--r2); overflow: hidden; }
@media (min-width: 34rem) { .drench__facts { grid-template-columns: repeat(3, 1fr); } }
.drench__fact { background: var(--red-deep); padding: var(--s5); }
.drench__fact dt { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; font-stretch: 105%; letter-spacing: -0.03em; line-height: 1; margin-bottom: var(--s2); }
.drench__fact dd { font-size: var(--t-sm); color: rgb(255 255 255 / 0.8); }
.drench__foot { font-size: var(--t-xs); color: rgb(255 255 255 / 0.62); margin-top: var(--s5); max-width: 50ch; text-wrap: pretty; }

.incision { width: 100%; max-width: 34rem; height: auto; margin-inline: auto; }
.incision__path { fill: none; stroke: rgb(255 255 255 / 0.5); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.incision__mark { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.incision__label { font-family: var(--font-display); font-size: 12px; font-weight: 700; font-stretch: 86%; fill: rgb(255 255 255 / 0.8); }
.incision__lead { stroke: rgb(255 255 255 / 0.35); stroke-width: 1.25; }

/* ============================================================
   PRESTAZIONI — lista con gerarchia, non griglia di card uguali
   ============================================================ */
.svc { border-block: 1px solid var(--line); }
.svc__row {
  display: block;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--d-fast) var(--ease);
}
.svc__row:last-child { border-bottom: 0; }
.svc__row:hover { background: var(--red-wash); }
.svc__inner { display: grid; gap: var(--s3); }
@media (min-width: 56rem) {
  .svc__inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr) auto; align-items: start; gap: var(--s6); }
}
.svc__name { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; }
.svc__desc { color: var(--ink-2); font-size: var(--t-sm); max-width: 48ch; }
.svc__arrow { display: none; align-self: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--line-strong); border-radius: 50%; place-items: center; color: var(--ink); transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
@media (min-width: 56rem) { .svc__arrow { display: grid; } }
.svc__row:hover .svc__arrow { background: var(--red-action); border-color: var(--red-action); color: #fff; }
.svc__arrow svg { width: 1.125rem; height: 1.125rem; }

/* ============================================================
   PERCORSO — qui i numeri sono guadagnati: è una sequenza reale
   ============================================================ */
.path { display: grid; gap: var(--s6); counter-reset: step; }
@media (min-width: 56rem) { .path { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }
.path__step { counter-increment: step; }
.path__rule { display: block; height: 3px; background: var(--red); transform-origin: left center; margin-bottom: var(--s4); }
.path__step::before {
  content: "Passo " counter(step);
  display: block;
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 750;
  font-stretch: 88%;
  color: var(--red-ink); margin-bottom: var(--s3);
}
.path__step h3 { margin-bottom: var(--s3); }
.path__step p { color: var(--ink-2); font-size: var(--t-sm); }

/* ============================================================
   ÉQUIPE — facce vere, nessuna foto stock
   ============================================================ */
/* ------------------------------------------------------------
   Carosello dell'équipe.
   La base è uno scorrimento orizzontale nativo con scroll-snap:
   funziona col dito, con la rotellina, con Tab e senza JavaScript.
   Le frecce sono un sovrappiù per il mouse, e site.js le aggiunge
   solo se servono davvero — se le schede ci stanno tutte, spariscono.
   ------------------------------------------------------------ */
.team-car { position: relative; }
.team-car__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }

.team {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(11.5rem, 1fr);
  gap: var(--s5);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  /* Il bordo sfumato della scrollbar nativa su Windows mangia una
     riga di testo: lo spazio sotto glielo diamo noi. */
  padding-bottom: var(--s4);
  scrollbar-width: thin;
}
@media (min-width: 40rem) { .team { grid-auto-columns: minmax(13rem, 1fr); } }
@media (min-width: 64rem) { .team { grid-auto-columns: minmax(14rem, 1fr); } }

.team__card { display: flex; flex-direction: column; gap: var(--s3); scroll-snap-align: start; }

/* Le frecce: 48 px di bersaglio, come ogni altro comando del sito. */
.team-car__nav { display: flex; gap: var(--s2); }
.team-car__btn {
  width: 3rem; height: 3rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--ink);
  border: 2px solid var(--line-strong); border-radius: var(--r2);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.team-car__btn svg { width: 1.25rem; height: 1.25rem; }
.team-car__btn:hover:not(:disabled) { border-color: var(--red-action); background: var(--red-action); color: #fff; }
.team-car__btn:disabled { opacity: 0.3; cursor: default; }
.team-car__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.team__ph {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--r2); background: var(--surface-2);
}
.team__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.team__name { font-family: var(--font-display); font-weight: 750; font-size: 1.0625rem; letter-spacing: -0.015em; }
.team__role { font-size: var(--t-sm); color: var(--ink-2); }

/* ============================================================
   RECENSIONI
   ============================================================ */
.revs__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }
.revs { display: grid; gap: var(--s4); }
@media (min-width: 48rem) { .revs { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }
.rev { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r2); display: flex; flex-direction: column; gap: var(--s3); }
.rev__stars { display: flex; gap: 2px; color: var(--verde); }
.rev__stars svg { width: 1.0625rem; height: 1.0625rem; }
.rev__text { font-size: var(--t-sm); text-wrap: pretty; }
.rev__who { margin-top: auto; font-size: var(--t-xs); color: var(--ink-2); font-family: var(--font-display); font-weight: 650; }

/* ============================================================
   DOVE SIAMO
   ============================================================ */
/* min-width: 0 sulle colonne: senza, la colonna di una griglia non
   scende sotto la larghezza minima del suo contenuto, e la mappa
   sborda di una ventina di pixel sui telefoni da 360. */
.place__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.place__grid > * { min-width: 0; }
@media (min-width: 56rem) { .place__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } }
.place__dl { display: grid; gap: var(--s5); margin-block: var(--s6); }
.place__dl dt { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; font-stretch: 88%; color: var(--ink-2); margin-bottom: var(--s1); }
.place__dl dd { font-size: 1.0625rem; }
/* Niente min-height insieme ad aspect-ratio: con 17rem di altezza
   minima il rapporto 4/3 ricalcolava la LARGHEZZA a 363 px, e su un
   telefono da 360 la mappa sporgeva dallo schermo. Sui display
   stretti il riquadro diventa quadrato, che per una mappa è anche
   meglio. */
.map {
  position: relative; width: 100%; min-width: 0; aspect-ratio: 4 / 3;
  border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden;
  background: var(--surface-2);
}
@media (max-width: 30rem) { .map { aspect-ratio: 1 / 1; } }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__placeholder {
  position: absolute; inset: 0; width: 100%;
  display: grid; place-items: center; align-content: center; gap: var(--s4);
  padding: var(--s6); text-align: center;
  background: var(--surface-2); cursor: pointer; border: 0;
}
.map__placeholder span { font-size: var(--t-sm); color: var(--ink-2); max-width: 32ch; }
/* Il testo del segnaposto non deve dettare la larghezza del
   riquadro: dentro una griglia lo farebbe. */
.map__placeholder { min-width: 0; }
.map__placeholder > * { max-width: 100%; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.012em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 0.875rem; height: 0.875rem;
  border-right: 2px solid var(--red-ink); border-bottom: 2px solid var(--red-ink);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--d-fast) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__a { padding-bottom: var(--s5); color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }

/* ============================================================
   CTA FINALE
   ============================================================ */
/* Chiusura di pagina: la sala della clinica sotto una velatura
   piena. La fotografia dà un ambiente alle due chiamate all'azione;
   la velatura è spessa perché qui conta il contrasto del testo, non
   la fotografia — che infatti si intuisce, non si guarda. */
.endcta { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: #fff; }
.endcta__bg { position: absolute; inset: 0; z-index: -2; }
.endcta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.endcta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right,
      oklch(0.17 0.014 27.5 / 0.93) 0%,
      oklch(0.17 0.014 27.5 / 0.88) 55%,
      oklch(0.17 0.014 27.5 / 0.78) 100%);
}
.endcta .lead { color: rgb(255 255 255 / 0.84); }
.btn--ondark-ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.5); }
.btn--ondark-ghost:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); }

/* Riga di servizio: orari, indirizzo, parcheggio. Le tre cose che
   la gente cerca prima di telefonare, sotto al titolo e non in
   fondo alla pagina. */
.endcta__info {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  margin-top: var(--s5); font-size: var(--t-sm); color: rgb(255 255 255 / 0.84);
}
.endcta__info li { display: flex; align-items: center; gap: var(--s2); }
.endcta__info svg { width: 1.125rem; height: 1.125rem; flex: none; color: rgb(255 255 255 / 0.62); }
.endcta__in { position: relative; display: grid; gap: var(--s6); }
@media (min-width: 56rem) { .endcta__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: var(--s8) var(--s6); }
.site-footer__grid { display: grid; gap: var(--s7); }
@media (min-width: 56rem) { .site-footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }
.site-footer h2 { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; font-stretch: 88%; color: var(--ink-2); margin-bottom: var(--s4); }
.site-footer li + li { margin-top: var(--s3); }
.site-footer a { text-decoration: none; font-size: var(--t-sm); border-bottom: 1px solid transparent; transition: border-color var(--d-fast) var(--ease); }
.site-footer a:hover { border-color: var(--ink); }
.site-footer__legal { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); font-size: var(--t-xs); color: var(--ink-2); }
/* Il marchio è monolinea e sottile: a 2.25rem di altezza, dentro
   «CLINICA DAY-SURGERY» spariva. Qui va più del doppio, e la
   colonna del piè di pagina si allarga di conseguenza. */
.site-footer__logo { height: 5rem; width: auto; margin-bottom: var(--s5); }
@media (min-width: 56rem) { .site-footer__logo { height: 5.5rem; } }
.site-footer__addr { font-style: normal; font-size: var(--t-sm); color: var(--ink-2); }
/* Nel menu mobile il marchio resta piccolo: lì è un ritorno alla
   home, non la firma della pagina. */
.mobile-menu__logo { height: 2.25rem; width: auto; }

/* ============================================================
   PAGINA SERVIZIO
   ============================================================ */
/* Filetto verde sotto l'intestazione di pagina: separa senza
   aggiungere l'ennesima linea grigia, e porta il secondo colore
   su ogni pagina interna senza doverlo infilare nel testo. */
.phead { border-bottom: 3px solid var(--verde); padding-block: clamp(2rem, 4.5vw, 3.75rem); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--t-xs); color: var(--ink-2); margin-bottom: var(--s5); }
.crumbs a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: var(--s2); color: var(--line-strong); }
.phead__grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (min-width: 56rem) { .phead__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; } }

.sidebox {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r2); padding: var(--s6);
}
.sidebox h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; margin-bottom: var(--s3); }
.sidebox p { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s5); }
.sidebox .btn + .btn { margin-top: var(--s2); }

.bullets { display: grid; gap: var(--s4); max-width: var(--measure); }
.bullets li { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; }
.bullets svg { width: 1.375rem; height: 1.375rem; color: var(--red-ink); margin-top: 0.2rem; }

.detail__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 56rem) { .detail__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); align-items: start; } }
@media (min-width: 56rem) { .detail__aside { position: sticky; top: 6rem; } }

/* ============================================================
   BANNER CONSENSO (Consent Mode v2)
   ============================================================ */
.consent {
  position: fixed; left: var(--s4); right: var(--s4);
  bottom: calc(var(--actionbar-h) + var(--s4));
  z-index: var(--z-toast);
  max-width: 34rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r3);
  padding: var(--s5);
  box-shadow: 0 18px 50px rgb(24 12 12 / 0.22);
}
/* Su desktop il banner diventa una fascia ancorata in basso a tutta
   larghezza: una scheda flottante finisce inevitabilmente sopra una
   CTA, e coprire il pulsante che converte è il peggior danno che un
   banner di consenso possa fare. */
@media (min-width: 64rem) {
  .consent {
    left: 0; right: 0; bottom: 0; max-width: none;
    border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
    padding: var(--s5) var(--gutter);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6);
  }
  .consent__text { flex: 1 1 28rem; }
  .consent h2 { margin-bottom: var(--s1); }
  .consent p { margin-bottom: 0; max-width: 72ch; }
}
.consent[hidden] { display: none; }
.consent h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 750; margin-bottom: var(--s2); }
.consent p { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s4); text-wrap: pretty; }
.consent__row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.consent__row .btn { min-height: 2.875rem; padding: 0.625rem 1.125rem; font-size: 0.9375rem; }

/* ============================================================
   MOVIMENTO
   Il contenuto è visibile di default. Lo stato di partenza del
   reveal lo imposta GSAP solo quando è pronto: senza JS, o con
   prefers-reduced-motion, nulla resta mai nascosto.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   3. FOTOGRAFIA
   Due soli componenti per tutto il sito: la fascia a tutta
   larghezza e la coppia testo + immagine. La foto documenta,
   non decora, e non deve mai sembrare uno stock incollato.
   ============================================================ */
/* Fascia fotografica a tutta larghezza.

   Da telefono la targa NON sta sopra la fotografia: sta sotto, a
   tutta larghezza. Sovrapporre un rettangolo di testo a un'immagine
   larga 390 px significa coprirne metà e rendere illeggibili tutt'e
   due. Da 48rem in su lo spazio c'è, e la targa torna in
   sovrimpressione dove copre solo un angolo. */
.band { background: var(--surface-2); }
.band__shot { position: relative; overflow: hidden; height: clamp(17rem, 44vw, 30rem); }
.band__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.band__plate {
  padding: var(--s5) var(--gutter) var(--s6);
  background: var(--red-deep); color: #fff;
}
.band__plate p { font-size: var(--t-body); color: rgb(255 255 255 / 0.86); margin-top: var(--s2); max-width: 54ch; }
.band__plate .d-h3 { color: #fff; }

@media (min-width: 48rem) {
  .band { position: relative; }
  .band__shot { height: clamp(22rem, 42vw, 34rem); }
  .band__plate {
    position: absolute; left: 0; bottom: 0;
    max-width: min(44rem, calc(100% - var(--s8)));
    padding: var(--s6) var(--s7);
  }
}

/* Coppia testo + immagine, alternabile. Non una card: niente
   bordo, niente ombra, solo due colonne e un'immagine vera. */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--flip > .split__media { order: -1; }
}
.split__media { position: relative; overflow: hidden; border-radius: var(--r2); aspect-ratio: 4 / 3; background: var(--surface-2); }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split__body > * + * { margin-top: var(--s4); }

/* ============================================================
   4. TABELLE
   Solo la pagina cookie ne ha. Scorrono dentro il loro contenitore:
   una tabella a quattro colonne su 390 px non si fa rientrare, e
   far scorrere l'intera pagina in orizzontale è peggio.
   ============================================================ */
.tabella-scroll { overflow-x: auto; margin-block: var(--s5); border: 1px solid var(--line); border-radius: var(--r2); }
.tabella { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 34rem; }
.tabella caption { text-align: left; padding: var(--s4) var(--s5); font-family: var(--font-display); font-weight: 700; font-size: var(--t-xs); color: var(--ink-2); background: var(--surface); border-bottom: 1px solid var(--line); }
.tabella th, .tabella td { padding: var(--s4) var(--s5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tabella tbody tr:last-child th, .tabella tbody tr:last-child td { border-bottom: 0; }
.tabella thead th { font-family: var(--font-display); font-weight: 700; font-size: var(--t-xs); color: var(--ink-2); background: var(--surface); }
.tabella code { font-size: 0.875em; background: var(--red-wash); padding: 0.1em 0.4em; border-radius: var(--r1); }

/* ============================================================
   5. BLOG
   Schede e articolo. L'elenco non è una griglia di card tutte
   uguali: la fotografia è piccola e in alto, il titolo porta il
   peso, e il riassunto è lungo quanto serve a far decidere se
   aprire o no.
   ============================================================ */
.posts { display: grid; gap: var(--s6) var(--s5); }
@media (min-width: 46rem) { .posts { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }

.post-card { display: flex; flex-direction: column; gap: var(--s3); }
.post-card__ph {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--r2); background: var(--surface-2);
  border-top: 3px solid var(--verde);
}
.post-card__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--d-slow) var(--ease); }
.post-card:hover .post-card__ph img { transform: scale(1.04); }
.post-card__meta { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 650; color: var(--verde-ink); }
.post-card__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 750; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.post-card__title a { text-decoration: none; }
/* Il bersaglio del link copre tutta la scheda, ma il nome che lo
   screen reader legge resta il titolo: il resto è decorazione. */
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card { position: relative; }
.post-card__title a:hover { color: var(--red-ink); }
.post-card__sum { font-size: var(--t-sm); color: var(--ink-2); text-wrap: pretty; }
.post-card__go { margin-top: auto; padding-top: var(--s2); font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; color: var(--red-ink); }

/* ---- Articolo ---- */
.post__meta { margin-top: var(--s5); font-family: var(--font-display); font-size: var(--t-xs); font-weight: 650; color: var(--verde-ink); }
.post h2 { margin-top: var(--s8); margin-bottom: var(--s4); }
.post h2:first-child { margin-top: 0; }
.post p + p { margin-top: var(--s4); }
.post .bullets { margin-top: var(--s4); }

/* Riquadro di sintesi: chi scorre velocemente deve poter prendere
   la risposta e andarsene senza leggere tutto. Fondo neutro e un
   solo filetto verde: il colore marca, non riempie. */
.post__box {
  margin-top: var(--s8); padding: var(--s6);
  background: var(--surface); border-top: 3px solid var(--verde);
  border-radius: var(--r2);
}
.post__box .d-h3 { color: var(--verde-ink); margin-bottom: var(--s3); }

.post__altri { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); }
.post__altri .d-h3 { margin-bottom: var(--s4); }
.post__altri li + li { margin-top: var(--s3); }

/* La striscia blog in home si stacca con una riga e un fondo
   neutro, non con una campitura colorata: il verde in grande
   diventa pastello, e il pastello non è di questo marchio. */
.blog-strip {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}