/* Medica Line — design system dedicato (spec §9.1/§11.9).
   Layout = codice dell'agenzia, versionato. Contenuti = bozze validate dalla clinica.
   Palette "linea di cura": petrol + acciaio (token canonici in fondo al file).
   Type: Bricolage Grotesque (display) + Hanken Grotesk (testo + etichette in maiuscoletto). */

/* Token legacy (ml-*) ora ALIAS della palette canonica "linea di cura" (definita
   più sotto in :root). Un solo verde/oro/inchiostro su tutte le pagine: cambiando
   il token cambia ovunque. La palette canonica deriva da TenantConfig.tema
   (--colore-primario/-accento/-testo/-sfondo). */
/* ---- Font self-hostati ----------------------------------------------------
   Niente più fonts.googleapis.com: ogni visita mandava l'IP di chi legge a un
   terzo prima ancora che il banner del consenso avesse una risposta (regola 5
   del progetto). Licenze accanto ai binari, provenienza e runbook in
   docs/design/font-self-hostati.md.

   Sono i file VARIABILI di Google: un file copre l'intero asse dei pesi, quindi
   `font-weight` è un INTERVALLO. Ometterlo farebbe valere il default `normal`
   (400), la faccia resterebbe bloccata su un peso solo e il grassetto tornerebbe
   sintetizzato dal browser.

   `font-display: swap` va dichiarato qui: il &display=swap dell'URL di Google
   viveva nel loro CSS, non nel file. Senza, ~3s di testo invisibile.

   I nomi delle famiglie devono combaciare ESATTAMENTE con TenantConfig.tema
   (--font-titoli/--font-testo): il token del DB vince sui fallback del foglio, e
   un nome diverso qui significa font mai usato, nessun errore in console, sito
   silenziosamente brutto.

   Ci sono tutti i subset che serviva Google: `unicode-range` li tiene
   scollegati, si scaricano solo se in pagina compare un glifo che li richiede.

   Inter senza l'asse opsz, come lo chiedeva il tenant: aggiungerlo cambierebbe
   la resa dei titoli (taglio Display) e peserebbe 258 KB in più. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../../fonts/cormorant-garamond/cormorant-garamond-v21-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../../fonts/cormorant-garamond/cormorant-garamond-v21-italic-latin-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../../fonts/cormorant-garamond/cormorant-garamond-v21-italic-cyrillic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../../fonts/cormorant-garamond/cormorant-garamond-v21-italic-cyrillic-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../../fonts/cormorant-garamond/cormorant-garamond-v21-italic-vietnamese.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../../fonts/cormorant-garamond/cormorant-garamond-v21-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../../fonts/cormorant-garamond/cormorant-garamond-v21-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../../fonts/cormorant-garamond/cormorant-garamond-v21-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../../fonts/cormorant-garamond/cormorant-garamond-v21-cyrillic-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../../fonts/cormorant-garamond/cormorant-garamond-v21-vietnamese.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-italic-latin-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-italic-greek.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-italic-greek-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-italic-cyrillic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-italic-cyrillic-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-italic-vietnamese.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-greek.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-greek-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-cyrillic-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/inter-v20-vietnamese.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
  /* Alias del contenitore canonico (--maxw 1240): un solo bordo per tutte le pagine. */
  --max-width: 1240px;
  --primario: var(--petrol);
  --accento: var(--brass);
  --testo: var(--ink2);
  --sfondo: var(--paper);
  --crema: var(--card2);
  --ombra: 0 10px 40px rgba(0,0,0,.14);
  --ombra: 0 10px 40px color-mix(in srgb, var(--petrol) 14%, transparent);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-testo); color: var(--testo);
  background: var(--sfondo); line-height: 1.65; -webkit-font-smoothing: antialiased;
  /* Sticky footer: il body riempie sempre il viewport, il contenuto cresce. */
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3 { font-family: var(--font-titoli); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
a { color: var(--primario); text-decoration: none; }
a:hover { color: var(--accento); }
img { max-width: 100%; display: block; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem; z-index: 100; }
:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; }

/* Header legacy (.ml-header glass): rimosso — la nav unica è .tnav (in fondo al file). */

/* .btn-cta = alias del bottone primario: stessa identica resa di .btn.btn-primary
   (raggruppato nei selettori della sezione "BASE condivisa" in fondo al file).
   Tenuto perché i partial condivisi (_blocco, _cta_prenota) lo emettono. */

/* Hero / trust / sezioni / reveal legacy (.ml-hero, .ml-trust, .ml-section, .reveal):
   rimossi — sostituiti dal sistema "linea di cura" (.thero, .tmethod, .tsec-head,
   .treveal). Il contenitore griglia/card resta (usato da _card_trattamento). */

.griglia { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
/* Card trattamento — stesso sistema token delle altre card (.ml-*-card). */
.card {
  display: flex; flex-direction: column; overflow: hidden; background: var(--card2);
  border: 1px solid var(--line-lt); border-radius: var(--radius-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--ombra-card); }
.card img { width: 100%; height: 210px; object-fit: cover; }
.card-body { padding: 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.card-body h3 { margin: 0; font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; font-size: 1.3rem; }
.card-body h3 a { color: var(--ink2); }
.card-body h3 a:hover { color: var(--brass-dark); text-decoration: none; }
.card-body p { margin: 0; color: var(--ink-soft); }

/* Split / aree-cura / CTA-band / footer legacy (.ml-split, .ml-area, .ml-percorso,
   .ml-band, .ml-footer): rimossi — sostituiti da .tmethod, .ml-area-layout,
   .ml-percorso-card, .tcta (via _cta_band) e .tfoot. */

/* width:100% serve perché main è un flex item: i margini auto disabilitano lo stretch
   e main si restringeva al contenuto (≠ banda della testata). Così riempie la banda
   piena come .ml-pagehead → titolo e corpo allineati a sinistra. */
/* La colonna del contenuto. Sta su `.colonna` e non su `main` perché il
   landmark ora avvolge anche le fasce a tutta larghezza (vedi base.html). */
.colonna { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--pad) 4rem; }
.messaggi { max-width: var(--max-width); margin: 1.5rem auto 0; }
.messaggi .success { color: var(--primario); font-weight: 600; }
.prosa { line-height: 1.8; font-size: 1.05rem; } .prosa p { margin: 0 0 1rem; }
.prosa h2, .prosa h3 { color: var(--primario); margin: 1.6rem 0 .6rem; }
.prosa a { color: var(--primario); text-decoration: underline; }

/* ---------- Page head (band per liste/dettagli) ---------- */
.ml-pagehead {
  /* Stessa hero della home: petrol piatto + bagliore brass (token canonici). */
  background:
    radial-gradient(700px 320px at 85% -20%, var(--glow-freddo), transparent 55%),
    var(--petrol);
  color: #fff; border-bottom: 1px solid var(--line-dk);
}
/* Stesso contenitore del nav/.wrap → titolo allineato al logo. */
.ml-pagehead__inner { max-width: var(--maxw); margin: 0 auto; padding: 3.5rem var(--pad); }
.ml-pagehead__eyebrow { font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--brass-soft); margin: 0 0 .7rem; }
.ml-pagehead h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0; color: #fff; }
.ml-pagehead p { margin: .8rem 0 0; opacity: .88; max-width: 70ch; }
.ml-breadcrumb { font-size: .85rem; margin: 0 0 1rem; opacity: .8; }
.ml-breadcrumb a { color: var(--brass-soft); } .ml-breadcrumb a:hover { color: var(--accento); }
/* Byline cliccabile nell'header dell'articolo (porta alla scheda del professionista). */
.ml-pagehead__meta time { white-space: nowrap; }
.ml-pagehead__author { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(255,255,255,.4); transition: color .15s ease, text-decoration-color .15s ease; }
.ml-pagehead__author:hover { color: var(--brass-soft); text-decoration-color: var(--brass-soft); }

/* ---------- Filtri categoria ---------- */
.ml-filtri { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 auto 2.5rem; max-width: var(--max-width); padding: 2rem var(--pad) 0; }
.ml-chip {
  display: inline-block; padding: .45rem 1rem; border: 1px solid var(--line-md); border-radius: 999px;
  font-size: .88rem; color: var(--primario); background: #fff; transition: all .15s;
}
.ml-chip:hover, .ml-chip[aria-current="true"] { background: var(--primario); color: #fff; border-color: var(--primario); text-decoration: none; }

/* ---------- Dettaglio ---------- */
.ml-detail { display: grid; gap: 3rem; grid-template-columns: 1.6fr 1fr; align-items: start; padding-top: 3rem; }
.ml-detail__media img { width: 100%; border-radius: 8px; box-shadow: var(--ombra); }
.ml-aside {
  background: var(--crema); border: 1px solid var(--line-md); border-radius: 8px; padding: 1.6rem;
  position: sticky; top: 90px;
}
.ml-aside h3 { margin: 0 0 .8rem; font-size: 1.05rem; color: var(--primario); text-transform: uppercase; letter-spacing: 1px; }
.ml-aside ul { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.ml-aside li { padding: .35rem 0; border-bottom: 1px solid var(--line-md); }
.ml-aside li:last-child { border-bottom: 0; }
.ml-specs { margin: 0; }
.ml-specs > div { padding: .65rem 0; border-bottom: 1px solid var(--line-lt); }
.ml-specs > div:last-child { border-bottom: 0; }
.ml-specs dt { font-family: var(--f-label); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .3rem; }
.ml-specs dd { margin: 0; color: var(--ink2); font-size: .95rem; }
.ml-specs dd.ml-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.ml-spec-list { list-style: none; margin: 0; padding: 0; }
.ml-spec-list li { display: flex; gap: .6rem; line-height: 1.45; margin: .35rem 0; font-size: .95rem; color: var(--ink2); }
.ml-spec-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); margin-top: .5em; }
.ml-tech-card__tipo { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.ml-note { background: var(--nota-bg); border-left: 3px solid var(--accento); padding: 1rem 1.2rem; border-radius: 4px; margin: 1.5rem 0; }
.ml-note h3 { margin: 0 0 .4rem; color: var(--primario); font-size: 1rem; }
.ml-faq details { border-bottom: 1px solid var(--line-md); padding: .9rem 0; }
.ml-faq summary { cursor: pointer; font-weight: 600; color: var(--primario); }
.ml-faq summary::marker { color: var(--accento); }
.ml-faq p { margin: .6rem 0 0; opacity: .85; }
.ml-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.ml-tag { font-size: .82rem; background: var(--primario); color: #fff; padding: .25rem .7rem; border-radius: 4px; }
.ml-tag:hover { background: var(--accento); color: var(--cta-ink); text-decoration: none; }
.ml-empty { grid-column: 1 / -1; text-align: center; padding: 4rem 1.5rem; opacity: .7; }

/* ---------- Macro-area: percorsi + zone (struttura tipo sito reale) ---------- */
.ml-percorsi { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0 0 3rem; }
.ml-percorso-card { display: flex; flex-direction: column; background: var(--card2); border: 1px solid var(--line-lt); border-radius: 14px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.ml-percorso-card:hover { transform: translateY(-3px); box-shadow: var(--ombra-card); text-decoration: none; }
.ml-percorso-card img { width: 100%; height: 150px; object-fit: cover; }
.ml-percorso-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.ml-percorso-card__body h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; color: var(--ink2); margin: 0; }
.ml-percorso-card__body p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.ml-scopri { margin-top: auto; font-family: var(--f-label); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-dark); display: inline-flex; gap: .5rem; }
.ml-percorso-sec { margin: 2.6rem 0; }
.ml-percorso-sec > h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.025em; color: var(--ink2); border-bottom: 2px solid var(--brass); display: inline-block; padding-bottom: .25rem; margin-bottom: 1.2rem; }
.ml-zona { font-family: var(--f-label); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 1.6rem 0 .9rem; }
.ml-uomo { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line-lt); }
.ml-uomo > h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.025em; color: var(--ink2); margin-bottom: 1rem; }

/* ---------- Liste interne: spaziatura + griglie dedicate ---------- */
.ml-listing { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--paper); }

/* Sezioni correlate nelle pagine di dettaglio (card via componenti) */
.ml-correlati { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--line-lt); }
.ml-correlati > .wrap > h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; color: var(--ink2); margin: 0 0 1.4rem; }

/* Team: avatar rotondo (foto o iniziale), 4 colonne */
.ml-team { display: grid; gap: 1.6rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .ml-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ml-team { grid-template-columns: 1fr; } }
.ml-prof-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; background: var(--card2); border: 1px solid var(--line-lt); border-radius: var(--radius-card); padding: 2rem 1.2rem; transition: transform .18s ease, box-shadow .18s ease; }
.ml-prof-card:hover { transform: translateY(-3px); box-shadow: var(--ombra-card); text-decoration: none; }
.ml-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: var(--petrol); display: flex; align-items: center; justify-content: center; flex: none; }
.ml-avatar__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Override manuale inquadratura quando il ritaglio sul volto non basta. */
.ml-avatar--alto .ml-avatar__img { object-position: 50% 15%; }
.ml-avatar--basso .ml-avatar__img { object-position: 50% 85%; }
.ml-avatar__ph { font-family: var(--f-display); font-weight: 700; font-size: 2.1rem; letter-spacing: .02em; color: var(--brass-soft); }
.ml-prof-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; color: var(--ink2); margin: 0; }
.ml-prof-card p { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.ml-team-group { margin-bottom: 2.6rem; scroll-margin-top: 96px; }
.ml-team-h { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; color: var(--ink2); margin: 0 0 1.2rem; padding-bottom: .35rem; border-bottom: 2px solid var(--brass); display: inline-block; }

/* Archivio team con indice (TOC) laterale delle specialità (oltre 4 gruppi).
   La pagina si allarga per ospitare sidebar + griglia. Sotto le 4, layout
   semplice a una colonna (--notoc) con la griglia 4-col di default. */
.wrap.ml-team-wrap--wide { max-width: min(1480px, 94vw); }
.ml-team-layout { display: grid; grid-template-columns: 260px 1fr; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; }
.ml-team-layout--notoc { grid-template-columns: 1fr; }
/* Nell'archivio con TOC la griglia riempie il main: 3 colonne (poi 2, poi 1). */
.ml-team-layout:not(.ml-team-layout--notoc) .ml-team-main .ml-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ml-team-layout:not(.ml-team-layout--notoc) .ml-team-main .ml-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ml-team-layout:not(.ml-team-layout--notoc) .ml-team-main .ml-team { grid-template-columns: 1fr; } }
.ml-team-toc { position: sticky; top: 96px; }
.ml-team-toc__h { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--brass-dark); margin: 0 0 .8rem; }
.ml-team-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.ml-team-toc a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .7rem; border-radius: 9px; color: var(--ink-soft); font-size: .92rem; font-weight: 600; text-decoration: none; transition: background .15s ease, color .15s ease; }
.ml-team-toc a:hover { background: var(--tint-1); color: var(--ink2); text-decoration: none; }
.ml-team-toc a.on { background: var(--tint-2); color: var(--petrol); }
.ml-team-toc a em { font-style: normal; font-family: var(--f-label); font-size: .72rem; color: var(--brass-dark); background: var(--tint-brass); border-radius: 100px; padding: .05rem .5rem; flex: none; }
.ml-team-toc a.on em { color: var(--brass-ink); background: var(--brass); }
@media (max-width: 820px) {
  .ml-team-layout { grid-template-columns: 1fr; gap: 1.4rem; }
  .ml-team-toc { position: static; top: auto; }
  .ml-team-toc ul { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .ml-team-toc a { border: 1px solid var(--line-lt); border-radius: 100px; padding: .4rem .8rem; font-size: .85rem; }
  .ml-team-group { scroll-margin-top: 72px; }
}

/* Pagina aree di cura: contenuto + sidebar con il team della specialità */
.ml-area-layout { display: grid; grid-template-columns: 1fr 280px; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.ml-area-layout--noteam { grid-template-columns: 1fr; }
.ml-area-team { position: sticky; top: 96px; background: var(--card2); border: 1px solid var(--line-lt); border-radius: var(--radius-card); padding: 1.2rem 1.1rem; }
.ml-area-team__h { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; color: var(--brass-dark); margin: 0 0 .9rem; }
.ml-team-mini { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.ml-team-mini a { display: flex; align-items: center; gap: .7rem; padding: .45rem .5rem; border-radius: 10px; text-decoration: none; transition: background .15s ease; }
.ml-team-mini a:hover { background: var(--tint-1); text-decoration: none; }
.ml-avatar--sm { width: 46px; height: 46px; }
.ml-avatar--sm .ml-avatar__ph { font-size: 1rem; }
.ml-team-mini__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ml-team-mini__txt strong { font-family: var(--f-display); font-weight: 700; font-size: .92rem; color: var(--ink2); }
.ml-team-mini__txt em { font-style: normal; font-size: .78rem; color: var(--ink-soft); }
.ml-team-mini__all { font-family: var(--f-label); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brass-dark); display: inline-flex; gap: .4rem; }
@media (max-width: 820px) {
  .ml-area-layout { grid-template-columns: 1fr; gap: 1.6rem; }
  .ml-area-team { position: static; top: auto; }
  .ml-team-mini { flex-direction: row; flex-wrap: wrap; }
  .ml-team-mini a { flex: 1 1 220px; }
}

/* Tecnologie: card grandi, 2 colonne */
.ml-tech { display: grid; gap: 1.8rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .ml-tech { grid-template-columns: 1fr; } }
.ml-tech-card { display: flex; flex-direction: column; background: var(--card2); border: 1px solid var(--line-lt); border-radius: var(--radius-card); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.ml-tech-card:hover { transform: translateY(-3px); box-shadow: var(--ombra-card-lg); text-decoration: none; }
.ml-tech-card__media img { width: 100%; height: 260px; object-fit: cover; display: block; }
.ml-tech-card__body { padding: 1.6rem 1.8rem 1.9rem; display: flex; flex-direction: column; gap: .5rem; }
.ml-tech-card__brand { font-family: var(--f-label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-dark); }
/* Bio a schema fisso (professionista): stesse sezioni per tutti */
.ml-bio section { margin-top: 1.6rem; }
.ml-bio h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; color: var(--ink2); margin: 0 0 .5rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line-lt); }
.ml-bio p { color: var(--ink-soft); margin: .4rem 0; }
.ml-tech-card__body h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; color: var(--ink2); margin: 0; }
.ml-tech-card__body p { color: var(--ink-soft); margin: 0; }

/* ---------- Pagina grazie (centrata, design system) ---------- */
.ml-thanks { background: radial-gradient(700px 320px at 85% -20%, var(--glow-freddo), transparent 55%), var(--petrol); color: #fff; text-align: center; padding: clamp(5rem, 12vh, 9rem) 0; }
.ml-thanks .eyebrow { color: var(--brass-soft); display: flex; justify-content: center; margin-bottom: 1.4rem; }
.ml-thanks h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1; letter-spacing: -.03em; color: #fff; margin: 0; }
.ml-thanks p { color: rgba(255,255,255,.86); max-width: 46ch; margin: 1.4rem auto 0; font-size: clamp(1.02rem, 1.6vw, 1.18rem); }
.ml-thanks__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.4rem; }

/* ---------- Scheda professionista ---------- */
.ml-prof { display: grid; gap: 2.5rem; grid-template-columns: 320px 1fr; align-items: start; padding-top: 3rem; }
.ml-prof__side { position: sticky; top: 96px; }
/* Foto reale, MAI ritagliata: sta nel riquadro per larghezza e altezza, ratio intatto. */
.ml-prof__photo { display: block; margin: 0 auto; max-width: 100%; max-height: 460px; width: auto; height: auto; border-radius: 8px; box-shadow: var(--ombra); }
/* Segnaposto foto: avatar petrol + iniziali, riquadro 4:3 (basso, non «lungo»). */
.ml-prof__ph { aspect-ratio: 4 / 3; width: 100%; background: var(--petrol); display: flex; align-items: center; justify-content: center; }
.ml-prof__ph span { font-family: var(--f-display); font-weight: 700; font-size: clamp(3rem, 6vw, 4.5rem); letter-spacing: .02em; color: var(--brass-soft); }
.ml-prof__albo { font-size: .85rem; opacity: .7; margin-top: .5rem; }
.ml-prof__tratt { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line-lt); }
.ml-prof__tratt h2 { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--brass-dark); margin: 0 0 .7rem; }
@media (max-width: 880px) { .ml-prof__side { position: static; top: auto; } }

/* ---------- Contatti: form + mappa in sidebar destra ---------- */
.ml-contatti { display: grid; grid-template-columns: 1fr 420px; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; padding-top: 3rem; }
.ml-contatti--solo { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
.ml-contatti__main .ml-form { max-width: none; margin: 0; padding-top: 0; }
.ml-contatti__side { position: sticky; top: 96px; }
.ml-contatti__side .ml-mappa { max-width: none; margin: 0; }
@media (max-width: 820px) {
  .ml-contatti { grid-template-columns: 1fr; max-width: 640px; }
  .ml-contatti__side { position: static; top: auto; }
}

/* ---------- Pagine legali (privacy) ---------- */
.ml-legal { padding-top: 2.5rem; }
.ml-legal .prosa { max-width: 72ch; }
.ml-legal__box { max-width: 72ch; margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line-lt); }
.ml-legal__box h2 { font-family: var(--f-display); font-size: 1.2rem; color: var(--petrol); margin: 1.2rem 0 .3rem; }
.ml-legal__box p { color: var(--ink-soft); line-height: 1.6; }

/* ---------- Blog / Articoli ---------- */
/* Card articolo: riusa .card (token). Kicker categoria + meta autore·data. */
.card-kicker { font-family: var(--f-label); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-dark); }
.card-meta { margin: 0; font-size: .84rem; color: var(--ink-soft); }
/* Dettaglio articolo: colonna di lettura centrata. */
.ml-article { max-width: 72ch; margin: 0; padding-top: 3rem; }
.ml-article__media img { width: 100%; border-radius: var(--radius-card); box-shadow: var(--ombra); margin-bottom: 2rem; }
.ml-article__lead { font-size: 1.2rem; line-height: 1.6; color: var(--ink2); margin: 0 0 1.6rem; }
.ml-article .prosa { font-size: 1.08rem; }
.ml-article__autore { display: flex; align-items: center; gap: 1rem; margin: 2.4rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line-lt); }
.ml-article__autore .ml-avatar { flex: none; }
.ml-article__autore-txt { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.ml-article__autore-nome { margin: 0; font-family: var(--f-display); font-weight: 700; line-height: 1.15; color: var(--ink2); }
.ml-article__autore-nome a { color: var(--ink2); }
.ml-article__autore-nome a:hover { color: var(--brass-dark); }
.ml-article__autore-ruolo { margin: 0; font-size: .9rem; line-height: 1.2; color: var(--ink-soft); }
/* Bibliografia (fonti scientifiche dell'articolo) */
.ml-article .fonti { margin: 1.6rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line-lt); }
.fonti__titolo { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; color: var(--ink2); margin: 0 0 1rem; }
.fonti__lista { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.fonti__item { font-size: .92rem; line-height: 1.45; color: var(--ink-soft); }
.fonti__rif { color: var(--ink2); font-weight: 600; }
a.fonti__rif:hover { color: var(--brass-dark); }
.fonti__meta { display: block; margin-top: .15rem; color: var(--ink-soft); }

/* ---------- Articolo: indice (TOC) laterale ----------
   Quando JS trova ≥2 <h2> sposta il testo in .ml-article__main e affianca l'indice.
   Il layout riempie la banda piena di main (come la testata): il testo resta
   ALLINEATO A SINISTRA col titolo (niente contenitore centrato e rientrato),
   l'indice va nel margine destro, la colonna centrale flessibile fa da respiro. */
.ml-article .prosa h2 { scroll-margin-top: 96px; }
.ml-article--toc {
  max-width: none;  /* annulla il 72ch di .ml-article: qui si riempie la banda piena */
  display: grid;
  grid-template-columns: minmax(0, 72ch) minmax(clamp(2rem, 5vw, 4.5rem), 1fr) clamp(200px, 19vw, 244px);
  align-items: start;
}
.ml-article--toc .ml-article__main { grid-column: 1; grid-row: 1; min-width: 0; }
.ml-toc { grid-column: 3; grid-row: 1; position: sticky; top: 96px; align-self: start; }
.ml-toc__label { font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--brass-dark); margin: 0 0 .8rem; }
.ml-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; max-height: calc(100vh - 140px); overflow-y: auto; }
.ml-toc__link { display: block; padding: .5rem .7rem; border-radius: 9px; color: var(--ink-soft); font-size: .9rem; line-height: 1.35; font-weight: 600; text-decoration: none; overflow-wrap: break-word; hyphens: auto; transition: background .15s ease, color .15s ease; }
.ml-toc__link:hover { background: var(--tint-1); color: var(--ink2); text-decoration: none; }
.ml-toc__link.is-active { background: var(--tint-2); color: var(--petrol); }

@media (max-width: 1024px) {
  .ml-article--toc { display: block; max-width: 72ch; }
  .ml-toc { position: static; top: auto; margin: 0 0 2rem; padding: 1rem 1.1rem; background: var(--card2); border: 1px solid var(--line-lt); border-radius: var(--radius-card); }
  .ml-toc__list { max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Paginazione */
.paginazione { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 3rem; font-size: .92rem; }
.paginazione__stato { color: var(--ink-soft); font-family: var(--f-label); letter-spacing: .04em; }
.paginazione__link { font-weight: 600; color: var(--petrol); }
.paginazione__link:hover { color: var(--brass-dark); text-decoration: none; }

/* ---------- Mappa (immagine statica via proxy: chiave server-side, no cookie) ---------- */
.ml-mappa { max-width: 640px; margin: 2.5rem auto 0; }
.ml-mappa h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; color: var(--ink2); margin: 0 0 .4rem; }
.ml-mappa__addr { color: var(--ink-soft); margin: 0 0 1rem; }
.ml-mappa__link { display: block; position: relative; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line-lt); }
.ml-mappa__link:hover { text-decoration: none; }
.ml-mappa__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ml-mappa__ext { position: absolute; right: .6rem; bottom: .6rem; background: var(--paper); color: var(--petrol); font-family: var(--f-label); font-size: .72rem; letter-spacing: .04em; padding: .3rem .6rem; border-radius: 100px; box-shadow: var(--ombra-sm); }

/* ---------- Form contatti ---------- */
.ml-form { max-width: 640px; margin: 0 auto; padding-top: 3rem; }
.ml-form p { margin: 0 0 1.1rem; }
.ml-form label { display: block; font-weight: 600; margin-bottom: .3rem; color: var(--primario); }
.ml-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .ml-form textarea, .ml-form select {
  width: 100%; padding: .7rem .85rem; border: 1px solid var(--line-md); border-radius: 4px;
  font: inherit; background: #fff;
}
/* Input (telefono compreso: è un input[type=tel]) e select: stessa altezza */
.ml-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .ml-form select { min-height: 3.4rem; }
/* Select trattamento: più grande, optgroup per area */
.ml-form select { padding: .9rem 1rem; font-size: 1.05rem; line-height: 1.4; cursor: pointer; }
/* Il `select` nativo di WebKit ignora padding e altezza: il campo
   Trattamento restava più basso degli altri. Con `appearance: none`
   torna in riga, ma sparisce la freccia di sistema — va ridisegnata. */
.ml-form select {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23585141' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: .7rem .47rem;
}

.ml-form select optgroup { font-weight: 700; color: var(--petrol); }
.ml-form select option { font-weight: 400; color: var(--ink2); padding: .3rem 0; }
.ml-form .consenso { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .92rem; }
.ml-form .consenso label { font-weight: 400; color: var(--testo); }
.ml-form .consenso .ml-privacy-link { color: var(--petrol); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ml-form .consenso .ml-privacy-link:hover { color: var(--brass-dark); }
.ml-form .req { color: #b91c1c; font-weight: 700; text-decoration: none; border: 0; cursor: help; }
.ml-form .err { color: #b91c1c; font-size: .85rem; display: block; margin-top: .2rem; }
/* Errore di consenso reso fuori dal <label> (checkbox): rientra come i campi. */
.ml-form .err--blocco { margin: -.6rem 0 1.1rem; }
/* Riepilogo errori a fondo form (a11y: role=alert, riceve focus). */
.ml-form__alert { background: #fdf2f2; border: 1px solid #f0c5c5; border-radius: 10px; padding: .85rem 1.1rem; margin: 0 0 1.4rem; color: #8a1c1c; }
.ml-form__alert strong { display: block; }
.ml-form__alert p { margin: .35rem 0 0; font-size: .92rem; }
.ml-form__alert:focus { outline: 3px solid var(--accento); outline-offset: 2px; }
/* Stato disabilitato/pending dei bottoni (submit in invio). */
.btn:disabled, .btn-cta:disabled { opacity: .6; pointer-events: none; }

/* ---------- Blocchi pagina ---------- */
.blocco-hero { background: var(--crema); border-radius: 8px; padding: 3rem 2rem; text-align: center; margin: 2rem 0; }
.blocco-hero h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--primario); }
.blocco-testo, .blocco-faq, .blocco-gallery, .blocco-cta { margin: 2.5rem 0; }
.cta-prenota { text-align: center; margin: 3rem 0; }

@media (max-width: 900px) {
  .ml-detail, .ml-prof { grid-template-columns: 1fr; }
  .ml-aside { position: static; }
}

/* ============================================================
   DESIGN TOKENS — sorgente unica del look "linea di cura".
   Colori/font derivano da TenantConfig.tema (CSS variables): cambiando un token
   qui (o nel tema) cambia ovunque. I token legacy (--primario...) sono alias di
   questi (vedi inizio file). Nessun valore hardcodato nei template di pagina.
   ============================================================ */
:root{
  /* Palette "cura del volto" — olivo botanico + argilla calda.
     Colori/font derivano da TenantConfig.tema; qui i fallback del tenant. */
  --petrol:var(--colore-primario,#38492E);        /* olivo profondo (ex petrol) */
  --petrol-deep:var(--colore-primario-scuro,#25301C);
  --paper:var(--colore-sfondo,#F1ECE1);           /* avena caldo */
  --card2:var(--colore-superficie,#FAF6EE);
  /* --brass = salvia/olivo: ACCENTO SECONDARIO. Tarato per il FONDO SCURO
     (eyebrow su hero/banda metodo, bordi, nodi). Su fondo chiaro NON basta:
     lì va --brass-dark, che è la stessa famiglia portata sopra 4.5:1. */
  --brass:var(--colore-dettaglio,#8A9A7E);
  --brass-soft:var(--colore-dettaglio-chiaro,#B7C4A9);
  --brass-dark:var(--colore-dettaglio-scuro,#526248);
  --brass-ink:var(--colore-dettaglio-testo,#1c1304);   /* testo SOPRA --brass */
  /* --cta = argilla calda: BOTTONI D'AZIONE primari (= colore-accento del tema).
     Unico elemento caldo → l'azione spicca sull'olivo (complementare). */
  --cta:var(--colore-accento,#C57B54);
  --cta-hover:var(--colore-accento-hover,#D68F63);
  --cta-ink:var(--colore-accento-testo,#2A1608);
  --cta-line:var(--colore-accento-bordo,#8A4A2C);
  /* Bottone primario SUL FONDO SCURO (hero e barra di navigazione). Di default
     e' identico a quello su fondo chiaro: con un accento caldo l'azione stacca
     gia' dal primario. Una palette monocromatica, dove accento e primario
     coincidono, ridefinisce questi quattro token per invertirlo. */
  --cta-su-scuro:var(--colore-accento-su-scuro,var(--cta));
  --cta-su-scuro-hover:var(--colore-accento-su-scuro-hover,var(--cta-hover));
  --cta-su-scuro-ink:var(--colore-accento-su-scuro-testo,var(--cta-ink));
  --cta-su-scuro-line:var(--colore-accento-su-scuro-bordo,var(--cta-line));
  --ink2:var(--colore-testo,#211E17);
  --ink-soft:var(--colore-testo-tenue,#585141);
  /* Tinte derivate: si ricavano dai colori qui sopra con color-mix, così
     cambiando la palette seguono da sole. La riga rgba() che precede ciascuna
     è il fallback neutro per i browser senza color-mix. */
  --line-dk:rgba(255,255,255,.14);
  --line-lt:rgba(0,0,0,.12);
  --line-lt:color-mix(in srgb, var(--petrol) 12%, transparent);
  --line-md:rgba(0,0,0,.2);
  --line-md:color-mix(in srgb, var(--petrol) 22%, transparent);
  --tint-1:rgba(0,0,0,.05);
  --tint-1:color-mix(in srgb, var(--petrol) 5%, transparent);
  --tint-2:rgba(0,0,0,.06);
  --tint-2:color-mix(in srgb, var(--petrol) 6%, transparent);
  --tint-brass:rgba(0,0,0,.08);
  --tint-brass:color-mix(in srgb, var(--brass) 22%, transparent);
  --nota-bg:var(--card2);
  --nota-bg:color-mix(in srgb, var(--cta) 12%, var(--card2));
  --velo:rgba(0,0,0,.5);
  --velo:color-mix(in srgb, var(--petrol) 50%, transparent);
  /* Bagliori dell'hero: caldo dall'accento, freddo dal dettaglio. */
  --glow-caldo:transparent;
  --glow-caldo:color-mix(in srgb, var(--cta) 18%, transparent);
  --glow-freddo:transparent;
  --glow-freddo:color-mix(in srgb, var(--brass) 16%, transparent);
  /* Ombre: tinte col primario, non più col petrolio di Medica Line. */
  --ombra-sm:0 2px 8px rgba(0,0,0,.18);
  --ombra-sm:0 2px 8px color-mix(in srgb, var(--petrol) 18%, transparent);
  --ombra-card:0 14px 30px rgba(0,0,0,.1);
  --ombra-card:0 14px 30px color-mix(in srgb, var(--petrol) 10%, transparent);
  --ombra-card-lg:0 16px 36px rgba(0,0,0,.12);
  --ombra-card-lg:0 16px 36px color-mix(in srgb, var(--petrol) 12%, transparent);
  --ombra-cmp:0 22px 60px rgba(0,0,0,.32);
  --ombra-cmp:0 22px 60px color-mix(in srgb, var(--petrol) 32%, transparent);
  --ombra-nav:0 18px 40px rgba(0,0,0,.28);
  /* Tipografia — serif editoriale (titoli) + sans umanista (testo/etichette). */
  --f-display:var(--font-titoli,'Cormorant Garamond',Georgia,serif);
  --f-body:var(--font-testo,'Inter',system-ui,sans-serif);
  --f-label:var(--f-body);
  --fs-eyebrow:.72rem;
  --fs-body:clamp(1rem,1.2vw,1.08rem);
  --fs-h3:clamp(1.35rem,2.8vw,2rem);
  --fs-h2:clamp(1.9rem,4.2vw,3.1rem);
  --fs-h1:clamp(2.6rem,7.6vw,6rem);
  /* Spazio / forma / moto */
  --maxw:1240px;
  --pad:clamp(20px,5vw,64px);
  --space-section:clamp(72px,11vh,128px);
  --radius-pill:100px;
  --radius-card:14px;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
.tpl-home{background:var(--paper);color:var(--ink2);font-family:var(--f-body)}

/* BASE condivisa (non scoped alla home): contenitore, eyebrow, bottoni.
   Così tutte le pagine del tenant ereditano lo stesso look. */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
/* Dentro <main> il contenitore è già <main> (stesso 1240/--pad del pagehead):
   i blocchi con container proprio sono pass-through, evitano doppio padding. */
.colonna .wrap, .colonna .ml-filtri{max-width:none;padding-left:0;padding-right:0}
.eyebrow{font-family:var(--f-label);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
/* Peso unico della "voce etichetta" (Hanken in maiuscoletto): senza mono il 400
   risulterebbe troppo esile, il 600 dà presenza mantenendo il tono caldo. */
.thero-meta,.tpillar-k,.tfoot-col h2,.trep-go,.ml-zona,.ml-scopri,.ml-team-toc__h,.ml-area-team__h,.ml-team-mini__all,.ml-tech-card__brand,.ml-prof__tratt h2,.ml-specs dt,.ml-mappa__ext,.ml-team-toc a em{font-weight:600}
.btn,.btn-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-body);font-weight:600;font-size:.9rem;padding:13px 22px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:transform .16s var(--ease-out),background .2s var(--ease-out),color .2s,border-color .2s;white-space:nowrap}
.btn-primary,.btn-cta{background:var(--cta);color:var(--cta-ink);border-color:var(--cta-line)}
/* Il colore dell'etichetta va RIDICHIARATO qui: `a:hover{color:var(--accento)}`
   (0,1,1) batte `.btn-primary` (0,1,0), e ogni bottone che e' un <a> passava in
   hover a salvia su terracotta — 1.14:1, la scritta spariva. */
.btn-primary:hover,.btn-cta:hover{background:var(--cta-hover);color:var(--cta-ink);text-decoration:none}
/* Sul fondo scuro il bottone primario usa la propria variante. La nav e' scura
   su tutte le pagine (sulla home e' trasparente sopra l'hero, che e' scuro
   ugualmente), quindi la regola copre tutto il sito con una sola riga. */
.thero .btn-primary,.thero .btn-cta,.tnav .btn-primary,.tnav .btn-cta{background:var(--cta-su-scuro);color:var(--cta-su-scuro-ink);border-color:var(--cta-su-scuro-line)}
.thero .btn-primary:hover,.thero .btn-cta:hover,.tnav .btn-primary:hover,.tnav .btn-cta:hover{background:var(--cta-su-scuro-hover)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:#fff;text-decoration:none}
/* lift solo su dispositivi con hover reale; press feedback ovunque */
@media(hover:hover) and (pointer:fine){.btn:hover,.btn-cta:hover{transform:translateY(-2px)}}
.btn:active,.btn-cta:active{transform:scale(.97)}
.btn .btn-arrow{font-size:1.05em;line-height:1;transition:transform .16s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.btn:hover .btn-arrow{transform:translateX(3px)}}
.btn-arrow{font-size:1.05em;line-height:1}

/* NAV — unica su tutte le pagine. Default: barra solida petrol sticky (stesso
   verde della hero home). Sulla home (.tpl-home) diventa trasparente sull'hero. */
.tnav{position:sticky;top:0;z-index:30;padding:18px 0;background:var(--petrol);border-bottom:1px solid var(--line-dk)}
.tpl-home .tnav{position:absolute;top:0;left:0;right:0;padding:18px 0;background:transparent;border-bottom:0}
.tnav .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.tnav-in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.tnav .brand{display:flex;align-items:center;gap:11px;color:#fff}
.tnav .brand-mark{width:34px;height:34px;flex:none}
.tnav .brand-logo{display:block;height:auto;flex:none}
.tnav .brand-name{font-family:var(--f-display);font-weight:700;font-size:1.18rem;letter-spacing:-.01em;color:#fff}
.tnav .brand-name b{color:var(--brass-soft);font-weight:700}
.tnav-menu{display:flex;align-items:center;gap:clamp(20px,3vw,30px)}
.tnav-links{display:flex;gap:30px;align-items:center}
.tnav-links a{color:rgba(255,255,255,.82);font-size:.92rem;font-weight:500;transition:color .2s}
.tnav-links a:hover{color:#fff;text-decoration:none}
/* Pagina corrente: testo pieno + sottolineatura acciaio (stato/wayfinding, non oro). */
.tnav-links a.on{color:#fff;text-decoration:underline;text-decoration-color:var(--brass-soft);text-decoration-thickness:2px;text-underline-offset:6px}
/* Sottomenu (header + dropdown): si apre su hover/focus a desktop. */
.tnav-item{position:relative;display:inline-flex;align-items:center}
.tnav-caret{font-size:.7em;opacity:.7;margin-left:3px}
.tnav-sub{position:absolute;top:100%;left:-.5rem;min-width:210px;background:var(--petrol-deep);border:1px solid var(--line-dk);border-radius:12px;padding:.5rem;display:flex;flex-direction:column;gap:.1rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility .2s;box-shadow:var(--ombra-nav);z-index:31}
.tnav-has-sub:hover .tnav-sub,.tnav-has-sub:focus-within .tnav-sub{opacity:1;visibility:visible;transform:none}
.tnav-sub a{padding:.55rem .7rem;border-radius:8px;color:rgba(255,255,255,.82);font-size:.9rem;font-weight:500;white-space:nowrap}
.tnav-sub a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
@media(prefers-reduced-motion:reduce){.tnav-sub{transition:none}}
/* CTA del nav: auto-sufficiente (le pagine interne non hanno .tpl-home .btn). */
.tnav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--cta);color:var(--cta-ink);font-family:var(--f-body);font-weight:600;font-size:.9rem;padding:11px 20px;border-radius:100px;border:1px solid var(--cta-line);white-space:nowrap;transition:transform .16s var(--ease-out),background .2s}
.tnav-cta:hover{background:var(--cta-hover);color:var(--cta-ink);text-decoration:none}
.tnav-cta:active{transform:scale(.97)}
/* Hamburger (solo mobile) */
.tnav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;background:transparent;border:0;cursor:pointer;padding:8px;flex:none}
.tnav-toggle span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .25s var(--ease-out),opacity .2s}
@media(max-width:880px){
  .tnav-toggle{display:inline-flex}
  /* Logo ~20% più piccolo su mobile, allineato a sinistra */
  .tnav .brand{transform:scale(.8);transform-origin:left center}
  .tnav.open .tnav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .tnav.open .tnav-toggle span:nth-child(2){opacity:0}
  .tnav.open .tnav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* Menu a comparsa animato dall'alto */
  .tnav-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--petrol-deep);padding:.4rem var(--pad) 1.3rem;box-shadow:var(--ombra-nav);transform:translateY(-14px);opacity:0;visibility:hidden;transition:transform .28s var(--ease-out),opacity .28s,visibility .28s}
  .tnav.open .tnav-menu{transform:translateY(0);opacity:1;visibility:visible}
  .tnav-links{flex-direction:column;align-items:stretch;gap:0}
  .tnav-links a{padding:.9rem 0;border-bottom:1px solid var(--line-dk);font-size:1.02rem}
  /* Sottomenu su mobile: sempre visibile, rientrato (niente hover sul touch). */
  .tnav-item{flex-direction:column;align-items:stretch}
  .tnav-caret{display:none}
  .tnav-sub{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:0;box-shadow:none;padding:0 0 0 1rem;min-width:0}
  .tnav-sub a{padding:.7rem 0;font-size:.96rem;color:rgba(255,255,255,.7)}
  .tnav-cta{margin-top:1rem;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.tnav-menu{transition:opacity .01s}}

/* HERO */
.thero{position:relative;color:#fff;padding-top:clamp(150px,20vh,210px);padding-bottom:clamp(80px,12vh,140px);overflow:hidden;
  background:radial-gradient(120% 90% at 78% 12%,var(--glow-caldo),transparent 46%),linear-gradient(150deg,var(--petrol) 8%,var(--petrol-deep) 96%)}
.thero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 85% -10%,var(--glow-freddo),transparent 55%)}
.thero-grid{position:relative;z-index:2}
.thero-eyebrow{color:var(--brass-soft);margin-bottom:30px;display:flex;align-items:center;gap:14px}
.thero-eyebrow .tick{width:34px;height:1px;background:var(--brass);display:inline-block}
.thero h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2.6rem,7.6vw,6rem);line-height:1;letter-spacing:-.035em;max-width:15ch;color:#fff;text-wrap:balance}
.thero h1 .accent{color:var(--brass-soft)}
.thero-sub{margin-top:32px;max-width:46ch;font-size:clamp(1.02rem,1.6vw,1.22rem);color:rgba(255,255,255,.86);text-wrap:pretty}
.thero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:42px}
.thero-meta{margin-top:46px;display:flex;gap:28px;flex-wrap:wrap;font-family:var(--f-label);font-size:.74rem;letter-spacing:.06em;color:rgba(255,255,255,.74);text-transform:uppercase}
.thero-meta span{display:flex;align-items:center;gap:9px}
.thero-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass)}
.thero-line{position:absolute;left:0;right:0;bottom:0;width:100%;height:220px;z-index:1;pointer-events:none}
.thero-line path{fill:none;stroke:var(--brass);stroke-width:2;stroke-dasharray:2400;stroke-dashoffset:2400;animation:tdraw 2.4s cubic-bezier(.7,0,.2,1) .25s forwards}
.thero-line .node{fill:var(--brass);opacity:0;animation:tpop .5s ease 2.1s forwards}
@keyframes tdraw{to{stroke-dashoffset:0}}
@keyframes tpop{to{opacity:1}}

/* REPARTI */
.treparti{padding:clamp(72px,11vh,128px) 0;position:relative}
.tsec-head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:54px}
.tsec-head .eyebrow{color:var(--brass-dark)}
.tsec-title{font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.03;letter-spacing:-.025em;max-width:18ch;margin-top:14px;color:var(--ink2);text-wrap:balance}
.tsec-lead{max-width:40ch;color:var(--ink-soft);font-size:1.02rem}
/* --node-x: stessa coordinata X per linea e nodo, così restano allineati a
   ogni breakpoint (prima usavano due clamp diversi). */
.trep-list{position:relative;border-top:1px solid var(--line-lt);--node-x:clamp(26px,4vw,52px)}
.trep-list::before{content:"";position:absolute;left:var(--node-x);top:0;bottom:0;width:2px;background:linear-gradient(var(--brass),var(--glow-freddo));transform:translateX(-50%) scaleY(0);transform-origin:top;transition:transform 1.1s ease}
.trep-list.lit::before{transform:translateX(-50%) scaleY(1)}
.trep{display:grid;grid-template-columns:clamp(60px,9vw,120px) 1fr auto;gap:clamp(16px,4vw,48px);align-items:center;padding:clamp(14px,2.4vw,22px) 0;border-bottom:1px solid var(--line-lt);position:relative;transition:background .3s}
.trep:hover{background:var(--tint-1);text-decoration:none}
.trep-node{position:relative;display:flex;align-items:center}
.trep-node .dot{width:13px;height:13px;border-radius:50%;background:var(--paper);border:2px solid var(--brass);position:absolute;left:var(--node-x);top:50%;transform:translate(-50%,-50%);z-index:2}
.trep:hover .trep-node .dot{background:var(--brass)}
.trep-body h3{font-family:var(--f-display);font-weight:600;font-size:clamp(1.35rem,2.8vw,2rem);letter-spacing:-.02em;line-height:1.05;color:var(--ink2);margin:0}
.trep-body p{color:var(--ink-soft);margin-top:6px;max-width:42ch;font-size:1rem}
/* nodo allineato al titolo (non al centro del blocco) per evitare il fuori-centro */
.trep{align-items:start}
.trep-node{align-self:stretch}
.trep-node .dot{top:1.15rem}
.trep-go{align-self:start;margin-top:.15rem}
.trep-go{font-family:var(--f-label);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);display:flex;align-items:center;gap:9px;white-space:nowrap}
.trep-go .arrow{transition:transform .25s;color:var(--brass-dark)}
.trep:hover .trep-go .arrow{transform:translateX(5px)}

/* METODO */
.tmethod{background:var(--petrol);color:#fff;padding:clamp(72px,11vh,120px) 0;position:relative;overflow:hidden}
.tmethod::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--line-dk)}
.tmethod-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,7vw,90px);align-items:start}
.tmethod-grid .eyebrow{color:var(--brass-soft)}
.tmethod h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.04;letter-spacing:-.025em;margin-top:14px;max-width:16ch;color:#fff;text-wrap:balance}
.tmethod h2 em{color:var(--brass-soft);font-style:normal}
.tpillars{display:flex;flex-direction:column;gap:2px}
.tpillar{padding:24px 0;border-top:1px solid var(--line-dk)}
.tpillar:last-child{border-bottom:1px solid var(--line-dk)}
.tpillar-k{font-family:var(--f-label);font-size:.74rem;letter-spacing:.1em;color:var(--brass-soft);text-transform:uppercase}
.tpillar h4{font-family:var(--f-display);font-weight:600;font-size:1.3rem;margin-top:9px;letter-spacing:-.01em;color:#fff}
.tpillar p{color:rgba(255,255,255,.7);margin-top:6px;font-size:.98rem;max-width:48ch}

/* CTA */
.tcta{padding:clamp(80px,13vh,150px) 0;text-align:center;background:var(--paper)}
.tcta .eyebrow{color:var(--brass-dark);justify-content:center;display:flex;margin-bottom:22px}
.tcta h2{font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,6vw,4.4rem);line-height:1;letter-spacing:-.035em;max-width:16ch;margin:0 auto;color:var(--ink2);text-wrap:balance}
.tcta p{color:var(--ink-soft);margin-top:22px;font-size:1.1rem;max-width:44ch;margin-left:auto;margin-right:auto}
.tcta .btn-primary{margin-top:38px;padding:17px 32px;font-size:1rem}

/* FOOTER restyle — condiviso su tutte le pagine (.wrap è scoped a .tpl-home) */
.tfoot{background:var(--petrol-deep);color:rgba(255,255,255,.66);padding:64px 0 40px;margin-top:auto}
.tfoot .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.tfoot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line-dk)}
/* Peso esplicito, non ereditato. Google dichiarava `font-weight: 500 700` e il
   400 ereditato dal body veniva agganciato al 500; col file variabile
   l'intervallo è 300-700 e il 400 verrebbe onorato alla lettera, assottigliando
   il wordmark del footer del 10% rispetto a com'è sempre stato reso. Il peso lo
   decide il componente, non l'intervallo della faccia (§9.9). */
.tfoot .brand-name{ font-weight: 500;color:#fff;font-family:var(--f-display);font-size:1.3rem}
.tfoot-logo{display:block;height:auto}
.tfoot .brand-name b{color:var(--brass-soft)}
.tfoot-col h2{font-family:var(--f-label);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:16px}
.tfoot-col a,.tfoot-col p{display:block;font-size:.95rem;margin-bottom:9px;color:rgba(255,255,255,.7)}
.tfoot-col a:hover{color:#fff;text-decoration:none}
.tfoot-cols{display:flex;gap:clamp(40px,7vw,90px);flex-wrap:wrap}
.tfoot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:30px;font-size:.82rem;color:rgba(255,255,255,.62);font-family:var(--f-label);letter-spacing:.04em}

/* REVEAL — il contenuto è visibile di default; lo stato nascosto si attiva solo
   con JS (html.js-reveal), così senza JS / crawler / headless nulla resta vuoto. */
.treveal{transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
html.js-reveal .treveal{opacity:0;transform:translateY(16px)}
html.js-reveal .treveal.in{opacity:1;transform:none}

@media(max-width:880px){
  .tmethod-grid{grid-template-columns:1fr;gap:36px}
  .trep{grid-template-columns:44px 1fr;gap:16px}
  .trep-go{display:none}
  /* col nodo = 44px: ricentra --node-x (linea e dot lo seguono insieme) */
  .trep-list{--node-x:22px}
}
@media(prefers-reduced-motion:reduce){
  .tpl-home *{animation:none!important;transition:none!important}
  .treveal{opacity:1;transform:none}
  .thero-line path{stroke-dashoffset:0}
  .trep-list::before{transform:translateX(-50%) scaleY(1)}
}

/* ---------- Cookie banner (CMP) ---------- */
.cmp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
body.cmp-lock{overflow:hidden}
.cmp-overlay{position:fixed;inset:0;z-index:1200;background:var(--velo);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:cmp-fade .28s ease both}
.cmp-overlay[hidden]{display:none}
.cmp-banner{position:fixed;left:50%;bottom:clamp(14px,2.5vw,30px);transform:translateX(-50%);width:80%;max-width:1080px;z-index:1300;
  background:var(--card2);color:var(--ink2);border:1px solid var(--line-lt);border-radius:var(--radius-card,14px);
  box-shadow:var(--ombra-cmp);padding:clamp(1.1rem,2.4vw,1.8rem);
  animation:cmp-rise .46s var(--ease-out,cubic-bezier(.23,1,.32,1)) both}
.cmp-banner[hidden]{display:none}
.cmp-banner:focus{outline:none}
.cmp-inner{display:flex;gap:clamp(1rem,2.6vw,2.2rem);align-items:center;flex-wrap:wrap}
.cmp-text{flex:1 1 300px;min-width:0}
.cmp-title{margin:0 0 .35rem;font-family:var(--f-display);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:var(--petrol)}
.cmp-text p{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.cmp-form{flex:1 1 360px;display:flex;flex-direction:column;gap:.85rem;border:0;margin:0;padding:0}
.cmp-opts{display:flex;gap:.5rem;flex-wrap:wrap;border:0;padding:0;margin:0;min-width:0}
.cmp-opt{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:600;color:var(--ink2);
  padding:.42rem .85rem;border:1px solid var(--line-lt);border-radius:var(--radius-pill,100px);cursor:pointer;user-select:none;
  transition:border-color .15s ease,background .15s ease}
.cmp-opt:hover{border-color:var(--brass)}
.cmp-opt input{accent-color:var(--brass);margin:0}
.cmp-opt--locked{opacity:.6;cursor:default}
.cmp-opt--locked:hover{border-color:var(--line-lt)}
.cmp-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.cmp-btn{flex:1 1 auto;padding:.7rem 1.15rem;border-radius:11px;font-family:var(--f-body);font-size:.88rem;font-weight:700;
  cursor:pointer;border:1px solid transparent;transition:transform .12s ease,filter .15s ease,background .15s ease}
.cmp-btn:active{transform:scale(.97)}
.cmp-btn--ghost{background:transparent;color:var(--petrol);border-color:var(--line-lt)}
.cmp-btn--ghost:hover{background:var(--tint-2)}
.cmp-btn--solid{background:var(--brass);color:var(--brass-ink);border-color:var(--brass)}
.cmp-btn--solid:hover{filter:brightness(1.06)}
.cmp-banner.cmp-out{animation:cmp-sink .42s var(--ease-out,cubic-bezier(.23,1,.32,1)) both}
.cmp-overlay.cmp-out{animation:cmp-defade .42s ease both}
@keyframes cmp-rise{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes cmp-fade{from{opacity:0}to{opacity:1}}
@keyframes cmp-sink{from{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(26px)}}
@keyframes cmp-defade{from{opacity:1}to{opacity:0}}
@media(max-width:680px){
  .cmp-banner{width:calc(100% - 24px);bottom:12px;padding:1.1rem}
  .cmp-actions .cmp-btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  .cmp-banner,.cmp-overlay{animation:none}
  .cmp-btn:active{transform:none}
}

/* ============================================================
   GIACOMO CHECCHIN — override specifici (wordmark + home bespoke).
   Il resto del look arriva dai token (olivo/argilla/Cormorant) sopra.
   ============================================================ */
/* Wordmark serif (niente logo caricato): nome + sottotitolo tracciato. */
.brand-wm{display:flex;flex-direction:column;line-height:1.02}
.tnav .brand-wm .brand-name{font-family:var(--f-display);font-weight:600;font-size:1.35rem;letter-spacing:.01em;color:#fff}
.brand-sub{font-family:var(--f-body);font-size:.58rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-soft);margin-top:3px}
@media(max-width:880px){.tnav .brand-wm .brand-name{font-size:1.2rem}}

/* Sezione trattamenti (preview home): fondo avena, griglia card. */
.tratt-preview{padding:clamp(72px,11vh,120px) 0;background:var(--paper)}
.gc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;margin-top:8px}
.gc-empty{padding:1.4rem 0;color:var(--ink-soft);font-size:1.02rem}
.gc-empty a{color:var(--cta-line);font-weight:600}
.gc-empty a:hover{color:var(--cta)}
/* Nota etica "quando non si tratta": filetto argilla, cifra del posizionamento. */
.gc-honesty{margin-top:2.4rem;max-width:64ch;padding:1.1rem 1.4rem;border-left:2px solid var(--cta);
  background:var(--card2);border-radius:0 12px 12px 0;font-size:1rem;color:var(--ink-soft)}
.gc-honesty b{font-family:var(--f-display);font-weight:600;font-size:1.12rem;color:var(--ink2)}
/* Cormorant è delicato: alle liste-etichetta serve un filo di corpo in più. */
.tpillar-k{font-weight:600}

/* ---------- Prenotazione su piattaforma esterna ---------- */
.prenotazione-esterna{margin-top:clamp(2.5rem,5vw,4rem);padding-top:2rem;border-top:1px solid var(--line-lt)}
.prenotazione-esterna h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.02em;color:var(--ink2);margin:0 0 1rem}
.prenotazione-esterna__link a{font-weight:600;color:var(--cta-line);text-decoration:underline;text-underline-offset:3px}
.prenotazione-esterna__nota{color:var(--ink-soft);font-size:.9rem;max-width:60ch;margin:.6rem 0 0}


/* ---- Sedi (partial core _sedi.html e pagina core sede_detail.html) ----
   Il tenant ha cinque ambulatori: il footer li linka da ogni pagina e /contatti/
   ne stampa l'elenco. Senza queste regole il <ul class="sedi__lista"> restava
   sullo UA stylesheet — pallini e 40px di rientro, l'unica lista puntata del
   sito — e la scheda della singola sede usciva senza gerarchia. */
.sedi{margin-top:clamp(3rem,6vw,4.5rem)}
.sedi>h2{font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 1.4rem}
.sedi__lista{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.sedi__lista>.sede{border:1px solid var(--line-lt);border-radius:var(--radius-card);padding:1.2rem 1.3rem}
.sede__nome{font-family:var(--f-display);font-size:1.15rem;margin:0 0 .5rem}
.sede__addr,.sede__orari{margin:0 0 .4rem;color:var(--ink-soft)}
.sede__tel,.sede__email,.sede__prenota{margin:0 0 .3rem}
.sede__tel a,.sede__email a,.sede__map{border-bottom:1px solid var(--line-lt)}
.sede__tel a:hover,.sede__email a:hover,.sede__map:hover{border-color:var(--accento)}
.sede-detail{max-width:62ch}
.sede-detail h1{margin-bottom:1rem}
.sede-detail h2{font-family:var(--f-display);font-size:1.25rem;margin:1.8rem 0 .4rem}
.sede-detail .sede__prenota{margin:1.6rem 0}
.backlink{margin-top:2.4rem}
.backlink a{color:var(--ink-soft)}
.backlink a:hover{color:var(--accento)}


/* ---- Link nudi del markup core ----
   `a { color: var(--primario) }` in cima al foglio vale, sul corpo del testo,
   quasi lo stesso colore del testo: un link che non si annuncia. I contesti che
   il tema veste già (nav, footer, card, chip, bottoni, briciole) non cambiano:
   qui si toccano solo le ancore senza classe che i template core lasciano nude. */
#contenuto li>a:not([class]),#contenuto p:not([class])>a:not([class]){
  color:var(--accento);text-decoration:underline;text-underline-offset:3px}
#contenuto li>a:not([class]):hover,#contenuto p:not([class])>a:not([class]):hover{
  color:var(--ink2)}