/* Omeosan — studio medico omeopatico. Plain CSS, no build step. */

@font-face { font-family: "Alegreya"; src: url("fonts/alegreya-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/alegreya-var-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* metric-matched fallbacks (measured with fontkit): no reflow when the webfonts swap in */
@font-face { font-family: "Alegreya fallback"; src: local("Georgia"); size-adjust: 91.48%; ascent-override: 111.06%; descent-override: 37.71%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya Sans fallback"; src: local("Arial"); size-adjust: 86.5%; ascent-override: 104.04%; descent-override: 34.68%; line-gap-override: 0%; }

:root {
  /* the old Omeosan blue, kept as the identity colour */
  --blu: oklch(0.376 0.137 264);          /* #1B3E89 */
  --blu-notte: oklch(0.285 0.1 264);
  --blu-chiaro: oklch(0.93 0.025 264);
  /* oxblood of the studio wall: small marks only */
  --ossido: oklch(0.45 0.15 24);

  --fondo: oklch(0.985 0.004 264);        /* neutral off-white, tinted to the brand hue */
  --superficie: oklch(0.955 0.01 264);
  --linea: oklch(0.86 0.015 264);
  --inchiostro: oklch(0.23 0.035 264);
  --inchiostro-2: oklch(0.41 0.035 264);

  --su-blu: oklch(0.975 0.008 264);
  --su-blu-2: oklch(0.84 0.04 264);

  --serif: "Alegreya", "Alegreya fallback", Georgia, serif;
  --sans: "Alegreya Sans", "Alegreya Sans fallback", Arial, sans-serif;

  --testo: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --piccolo: 0.9375rem;
  --h1: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);
  --h2: clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem);
  --h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.4rem);

  --misura: 66ch;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --spazio-s: 0.75rem;
  --spazio-m: 1.5rem;
  --spazio-l: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --spazio-xl: clamp(4rem, 2.5rem + 6vw, 8rem);

  --curva: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font: 400 var(--testo)/1.62 var(--serif);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

/* ---------- lateral slide between pages ----------
   Cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+; others just navigate).
   main.js tags the transition "avanti" or "indietro" from the menu order; the header stays still. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .testata { view-transition-name: testata; }
  ::view-transition-group(root) { animation-duration: 0.4s; }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 0.4s; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); animation-fill-mode: both; mix-blend-mode: normal;
  }
  ::view-transition-old(root) { animation-name: esce-a-sinistra; }
  ::view-transition-new(root) { animation-name: entra-da-destra; }
  html:active-view-transition-type(indietro)::view-transition-old(root) { animation-name: esce-a-destra; }
  html:active-view-transition-type(indietro)::view-transition-new(root) { animation-name: entra-da-sinistra; }
  ::view-transition-old(testata), ::view-transition-new(testata) { animation-duration: 0.25s; }
}
/* ---------- intro (home, first visit per session) ----------
   main.js adds html.intro-lock before the first paint, then runs: oblique wipe of the logo at the
   centre of a blue screen (1500ms) → hold (300ms) → it settles into the header (700ms, FLIP) →
   html.intro-rivela: menu fades in, hero text staggers in, photo reveal plays.
   Without the class the page is simply visible: this only ever enhances. */
html.intro-lock, html.intro-lock body { overflow: hidden; height: 100%; }
html.intro-lock body { background: var(--blu); }
html.intro-lock main, html.intro-lock .piede, html.intro-lock .menu { opacity: 0; }
html.intro-lock .eroe-foto img { animation: none; } /* replayed when the lock lifts */
/* Two straight left→right wipes on one clip shape: the top band (medallion + OMEOSAN) reveals first,
   a pause, then the bottom band (STUDIO MEDICO OMEOPATICO). 76% = middle of the empty gap between the
   two lines in logo-omeosan.png (rows 78–97 of 114). Six points: (0,0) (A,0) (A,76%) (B,76%) (B,100%) (0,100%).
   2250ms total = wipe 1100 + pause 400 + wipe 750; must match WIPE_MS in main.js. */
.marchio img.intro-wipe { animation: intro-logo-wipe 2250ms linear both; }
.marchio img.intro-move { transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes intro-logo-wipe {
  0% { clip-path: polygon(0 0, 0 0, 0 76%, 0 76%, 0 100%, 0 100%); animation-timing-function: var(--curva); }
  49% { clip-path: polygon(0 0, 100% 0, 100% 76%, 0 76%, 0 100%, 0 100%); }
  67% { clip-path: polygon(0 0, 100% 0, 100% 76%, 0 76%, 0 100%, 0 100%); animation-timing-function: var(--curva); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 76%, 100% 76%, 100% 100%, 0 100%); }
}
html.intro-rivela body { transition: background-color 500ms cubic-bezier(0.25, 1, 0.5, 1); }
html.intro-rivela main, html.intro-rivela .piede, html.intro-rivela .menu { transition: opacity 500ms cubic-bezier(0.25, 1, 0.5, 1); }
html.intro-rivela .eroe-testo > * { animation: intro-entra 600ms var(--curva) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
.eroe-testo > :nth-child(2) { --i: 1; }
.eroe-testo > :nth-child(3) { --i: 2; }
.eroe-testo > :nth-child(4) { --i: 3; }
@keyframes intro-entra {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.97); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes esce-a-sinistra { to { transform: translateX(-100%); } }
@keyframes entra-da-destra { from { transform: translateX(100%); } }
@keyframes esce-a-destra { to { transform: translateX(100%); } }
@keyframes entra-da-sinistra { from { transform: translateX(-100%); } }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--blu-notte);
  margin: 0;
}
h1 { font-size: var(--h1); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

p, li { text-wrap: pretty; }
@media (max-width: 40rem) { .prosa p, .prosa li { hyphens: auto; } } /* ragged-right on wide screens: no hyphens */

a { color: var(--blu); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 0.2s, text-decoration-color 0.2s; }
a:hover { color: var(--ossido); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--ossido); outline-offset: 3px; border-radius: 2px; }

.salta {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 30;
  background: var(--blu-notte); color: var(--su-blu); padding: 0.6rem 1rem;
  font: 500 1rem var(--sans); text-decoration: none;
}
.salta:focus { top: 0.75rem; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.contenitore { width: min(100% - 2 * var(--gutter), 76rem); margin-inline: auto; }

/* ---------- testata ---------- */

/* blue band carrying the official Omeosan logo (TESTATA.jpg, background made transparent so it sits on --blu) */
.testata { background: var(--blu); color: var(--su-blu); } /* no bottom border: on the home it flows straight into the blue hero */
.testata .contenitore {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 2.5rem; padding-block: clamp(0.9rem, 0.7rem + 0.8vw, 1.35rem);
}
.marchio { display: block; line-height: 0; border-radius: 2px; }
.marchio img { height: clamp(2.5rem, 1.9rem + 2.2vw, 4rem); width: auto; transition: opacity 0.2s; }
.marchio:hover img { opacity: 0.85; }
.testata :focus-visible { outline-color: var(--su-blu); }

.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.menu a {
  display: inline-block; padding-block: 0.45rem;
  font: 500 1.0625rem/1.2 var(--sans); color: var(--su-blu); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: #fff; border-bottom-color: color-mix(in oklch, var(--su-blu) 45%, transparent); }
.menu a[aria-current] { color: #fff; border-bottom-color: #fff; }
.menu .esterno::after { content: " ↗"; font-size: 0.8em; color: var(--su-blu-2); }

/* ---------- pagina interna ---------- */

.pagina { padding-block: var(--spazio-l) var(--spazio-xl); }
.pagina-griglia { display: grid; gap: var(--spazio-l); }
@media (min-width: 64rem) {
  /* two columns only when the page has a side menu; otherwise the article keeps the full reading measure */
  .pagina-griglia.con-lato { grid-template-columns: 15rem minmax(0, var(--misura)); column-gap: clamp(3rem, 6vw, 6rem); }
  .pagina-griglia > .lato { position: sticky; top: 2rem; align-self: start; max-height: calc(100svh - 4rem); overflow: auto; }
}

.intestazione { margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); max-width: var(--misura); }
.intestazione .sezione { font: 500 var(--piccolo)/1.3 var(--sans); color: var(--ossido); margin: 0 0 0.75rem; }

.sottomenu { font-family: var(--sans); }
/* sticky side menus scroll when taller than the screen: thin scrollbar, transparent track */
.lato { scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
.lato:hover { scrollbar-color: var(--blu) transparent; }
.sottomenu h2 { font: 700 var(--piccolo)/1.3 var(--sans); color: var(--inchiostro-2); margin-bottom: 0.5rem; }
.sottomenu ul, .sottomenu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.sottomenu a {
  display: block; padding: 0.45rem 0 0.45rem 0.9rem;
  font: 400 1.0625rem/1.3 var(--sans); color: var(--inchiostro); text-decoration: none;
  border-left: 1px solid var(--linea);
}
.sottomenu a:hover { color: var(--blu); border-left-color: var(--blu); }
.sottomenu a[aria-current] { color: var(--blu-notte); font-weight: 700; border-left: 1px solid var(--ossido); box-shadow: inset 2px 0 0 var(--ossido); }
.sottomenu + .sottomenu { margin-top: 2rem; }
.sottomenu ol { counter-reset: q; }
.sottomenu ol a { font-size: 1rem; }
.sottomenu ol a::before { counter-increment: q; content: counter(q) ". "; color: var(--inchiostro-2); }
@media (max-width: 63.99rem) {
  .lato { border-block: 1px solid var(--linea); padding-block: 1.25rem; }
  .sottomenu ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
  .sottomenu ul a { border-left: 0; padding-left: 0; }
  .sottomenu ul a[aria-current] { box-shadow: inset 0 -2px 0 var(--ossido); }
  .sottomenu ol a { padding-left: 0.75rem; }
}

/* ---------- prosa ---------- */

.prosa { max-width: var(--misura); }
.prosa > * + * { margin-top: 1.1em; }
.prosa p, .prosa ul, .prosa ol { margin-bottom: 0; }
.prosa :is(h2, h3) { margin-top: 2.4em; scroll-margin-top: 1.5rem; font-size: var(--h2); }
.prosa :is(h2, h3) + * { margin-top: 0.8em; }
.prosa :is(h2, h3) small { display: block; font: italic 400 0.62em/1.4 var(--serif); color: var(--inchiostro-2); margin-top: 0.35em; }
.prosa strong { font-weight: 700; color: var(--blu-notte); }
.prosa ul, .prosa ol { padding-left: 1.4em; }
.prosa li + li { margin-top: 0.45em; }
.prosa li::marker { color: var(--ossido); }
.prosa ol > li::marker { font: 700 0.95em var(--sans); }
.prosa > h1 { display: none; } /* the page title is rendered in .intestazione */

.prosa .fonte, .prosa .riferimento { font-size: var(--piccolo); line-height: 1.5; color: var(--inchiostro-2); }
.prosa .riferimento { margin-top: 0.4em; padding-left: 1rem; border-left: 1px solid var(--linea); }
.prosa .riferimento + .riferimento { margin-top: 0.25em; }

.citazione {
  margin: var(--spazio-l) 0 0; padding: 0;
  font: italic 400 clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem)/1.4 var(--serif); color: var(--blu-notte);
  text-wrap: balance;
}
.citazione::before { content: "“"; display: block; font: 800 3.5rem/0.6 var(--serif); color: var(--ossido); margin-bottom: 0.6rem; }
.citazione footer { margin-top: 0.9rem; font: normal 500 var(--piccolo)/1.4 var(--sans); color: var(--inchiostro-2); }

.avviso {
  margin-top: var(--spazio-l); padding: 1.5rem 1.75rem;
  background: var(--blu-chiaro); border-radius: 4px;
}
.avviso h2 { font: 700 var(--piccolo)/1.3 var(--sans); color: var(--blu-notte); margin: 0 0 0.4rem; letter-spacing: 0.02em; }
.avviso p { margin: 0; }

/* ---------- home ---------- */

.eroe { display: grid; background: var(--blu); color: var(--su-blu); }
@media (min-width: 56rem) {
  .eroe { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: min(88svh, 52rem); } /* half title, half photo */
}
.eroe-testo {
  display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
  padding: var(--spazio-l) var(--gutter);
}
@media (min-width: 56rem) { .eroe-testo { padding-inline: max(var(--gutter), (100vw - 76rem) / 2) clamp(2rem, 5vw, 5rem); } }
.eroe .sezione { font: 500 1rem/1.3 var(--sans); letter-spacing: 0.04em; color: var(--su-blu-2); margin: 0; }
.eroe h1 { color: var(--su-blu); font-size: clamp(2.6rem, 1.6rem + 3.8vw, 4.75rem); }
.eroe h1 span { display: block; font-weight: 400; font-style: italic; font-size: 0.5em; letter-spacing: 0; margin-top: 0.35em; color: var(--su-blu-2); }
.eroe p { margin: 0; max-width: 34ch; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); }
.eroe-contatti { display: grid; gap: 0.35rem; margin-top: 0.5rem; font-family: var(--sans); }
.eroe-contatti .etichetta { font: 500 var(--piccolo)/1.3 var(--sans); color: var(--su-blu-2); }
.eroe-contatti a { color: var(--su-blu); text-decoration: none; font: 700 clamp(1.5rem, 1.2rem + 1vw, 1.9rem)/1.2 var(--sans); letter-spacing: 0.01em; }
.eroe-contatti a.email { font-size: 1.125rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--su-blu-2); }
.eroe-contatti a:hover { color: #fff; text-decoration: underline; }
.eroe :focus-visible { outline-color: var(--su-blu); }

.eroe-foto { position: relative; margin: 0; min-height: 22rem; overflow: hidden; background: var(--blu-notte); }
.eroe-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
@media (max-width: 55.99rem) { .eroe-foto { aspect-ratio: 4 / 5; min-height: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .eroe-foto img { animation: svela 1.4s var(--curva) both; }
  @keyframes svela {
    from { clip-path: inset(8% 0 0 0); transform: scale(1.06); filter: saturate(0.6); }
    to { clip-path: inset(0); transform: none; filter: none; }
  }
}

.fascia { padding-block: var(--spazio-xl); }
.fascia + .fascia { border-top: 1px solid var(--linea); }
.fascia-titolo { max-width: var(--misura); margin-bottom: var(--spazio-l); }
.fascia-titolo p { margin: 0.75rem 0 0; color: var(--inchiostro-2); }

.omeopatia-home { display: grid; gap: var(--spazio-l); }
@media (min-width: 64rem) {
  .omeopatia-home { grid-template-columns: 15rem minmax(0, var(--misura)); column-gap: clamp(3rem, 6vw, 6rem); }
  .omeopatia-home > .lato { position: sticky; top: 2rem; align-self: start; max-height: calc(100svh - 4rem); overflow: auto; overscroll-behavior: contain; }
}
/* chapters of the home page: the side menu slides to each one (smooth scroll set on html) */
.capitolo { scroll-margin-top: 1.5rem; }
.capitolo + .capitolo { margin-top: var(--spazio-xl); padding-top: var(--spazio-l); border-top: 1px solid var(--linea); }
.capitolo .intestazione h2 { font-size: var(--h1); font-weight: 800; letter-spacing: -0.02em; }
/* home chapters: only the introduction shows; each section is a bar that opens its text */
.prosa .voce { margin-top: 0; border-top: 1px solid var(--linea); scroll-margin-top: 1.5rem; }
.prosa .voce:last-child { border-bottom: 1px solid var(--linea); }
.prosa > :not(.voce) + .voce { margin-top: 2em; }
.voce > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.1rem; cursor: pointer; list-style: none;
}
.voce > summary::-webkit-details-marker { display: none; }
.voce > summary h3 { margin: 0; font-size: var(--h3); line-height: 1.25; transition: color 0.2s; }
.voce > summary h3 small { display: block; font: italic 400 0.85em/1.4 var(--serif); color: var(--inchiostro-2); margin-top: 0.2em; }
.voce > summary::after {
  content: ""; flex: none; width: 0.6rem; height: 0.6rem; margin-right: 0.35rem;
  border: solid var(--inchiostro-2); border-width: 0 1.5px 1.5px 0;
  transform: translateY(-0.2rem) rotate(45deg); transition: transform 0.35s var(--curva), border-color 0.2s;
}
.voce > summary:hover h3 { color: var(--blu); }
.voce > summary:hover::after { border-color: var(--blu); }
.voce[open] > summary::after { transform: translateY(0.15rem) rotate(-135deg); border-color: var(--ossido); }
.voce-testo { padding-bottom: 1.75rem; }
.voce-testo > * + * { margin-top: 1.1em; }
.voce-testo > :first-child { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .voce { interpolate-size: allow-keywords; }
  .voce::details-content { block-size: 0; overflow: hidden; transition: block-size 0.45s var(--curva), content-visibility 0.45s allow-discrete; }
  .voce[open]::details-content { block-size: auto; }
}
@media (max-width: 63.99rem) { .prosa .voce { scroll-margin-top: 4.5rem; } }

/* chapter with folded sections: link on the left, chevron toggle on the right */
.sottomenu .con-sotto { position: relative; }
.sottomenu .con-sotto > a { padding-right: 2.5rem; }
.sottomenu summary {
  position: absolute; top: 0.2rem; right: 0; width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center; cursor: pointer; list-style: none; border-radius: 4px; color: var(--inchiostro-2);
}
.sottomenu summary::-webkit-details-marker { display: none; }
.sottomenu summary::before {
  content: ""; width: 0.5rem; height: 0.5rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: translateY(-0.15rem) rotate(45deg); transition: transform 0.3s var(--curva);
}
.sottomenu details[open] > summary::before { transform: translateY(0.1rem) rotate(-135deg); }
.sottomenu summary:hover { color: var(--blu); background: var(--superficie); }
.sottomenu details[open] > summary { color: var(--ossido); }
@media (prefers-reduced-motion: no-preference) {
  .sottomenu { interpolate-size: allow-keywords; }
  .sottomenu details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s var(--curva), content-visibility 0.35s allow-discrete; }
  .sottomenu details[open]::details-content { block-size: auto; }
}
.sottomenu .sotto { display: grid; gap: 0; margin: 0.1rem 0 0.5rem; }
.sottomenu .sotto a { padding: 0.3rem 0 0.3rem 1.75rem; font-size: 0.9375rem; line-height: 1.3; color: var(--inchiostro-2); }
.sottomenu .sotto a:hover { color: var(--blu); }
@media (max-width: 63.99rem) {
  .sottomenu .sotto, .sottomenu details { display: none; }
  .sottomenu .con-sotto > a { padding-right: 0; }
  /* phone/tablet: the four chapters stay reachable as a slim bar pinned to the top while reading */
  .omeopatia-home > .lato { position: sticky; top: 0; z-index: 10; background: var(--fondo); padding-block: 0.4rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .omeopatia-home > .lato h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .capitolo, .capitolo .prosa h3 { scroll-margin-top: 4.5rem; }
}

.studi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spazio-l) var(--spazio-m); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.studi li { border-top: 2px solid var(--blu); padding-top: 1.25rem; }
.studi h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); }
.studi h3 small { display: block; font: 500 var(--piccolo)/1.3 var(--sans); color: var(--inchiostro-2); margin-top: 0.35rem; }
.studi address { font-style: normal; margin-top: 0.75rem; }
.studi a { display: inline-block; margin-top: 0.6rem; font: 500 1rem var(--sans); }

.appuntamenti {
  margin-top: var(--spazio-l); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.75rem;
  font-family: var(--sans);
}
.appuntamenti .etichetta { font: 500 var(--piccolo)/1.3 var(--sans); color: var(--inchiostro-2); flex-basis: 100%; }
.appuntamenti a { font: 700 clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem)/1.2 var(--sans); text-decoration: none; color: var(--blu-notte); }
.appuntamenti a:hover { color: var(--ossido); }
.appuntamenti a.email { font-size: 1.15rem; font-weight: 500; text-decoration: underline; }

.canali { display: grid; gap: var(--spazio-m); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.canale {
  display: grid; gap: 0.5rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-decoration: none; color: var(--inchiostro);
  background: var(--superficie); border-radius: 4px;
  transition: background-color 0.3s var(--curva), color 0.3s var(--curva);
}
.canale b { font: 700 var(--h2)/1.1 var(--serif); color: var(--blu-notte); transition: color 0.3s var(--curva); }
.canale b::after { content: "→"; display: inline-block; margin-left: 0.35em; transition: transform 0.4s var(--curva); }
.canale span { color: var(--inchiostro-2); font-size: 1.0625rem; }
.canale:hover { background: var(--blu); color: var(--su-blu); }
.canale:hover b, .canale:hover span { color: var(--su-blu); }
.canale:hover b::after { transform: translateX(0.3em); }

/* ---------- medico ---------- */

.medico { display: grid; gap: var(--spazio-l); align-items: start; }
@media (min-width: 56rem) { .medico { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 6vw, 6rem); } }
.medico figure { margin: 0; }
.medico figure img { width: 100%; border-radius: 4px; }
.medico figcaption { margin-top: 0.6rem; font: 400 var(--piccolo)/1.4 var(--sans); color: var(--inchiostro-2); }
.medico .prosa ul { list-style: none; padding: 0; }
.medico .prosa ul li { padding-left: 1.25rem; position: relative; }
.medico .prosa ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.5rem; height: 1px; background: var(--ossido); }

/* ---------- contatti ---------- */

.contatti-foto { margin: var(--spazio-xl) 0 0; }
.contatti-foto img { width: 100%; max-height: 34rem; object-fit: cover; object-position: 50% 45%; border-radius: 4px; }
.contatti-foto figcaption { margin-top: 0.6rem; font: 400 var(--piccolo)/1.4 var(--sans); color: var(--inchiostro-2); }

/* ---------- piede ---------- */

.piede { background: var(--blu-notte); color: var(--su-blu); padding-block: var(--spazio-l) 2rem; font-family: var(--sans); font-size: 1rem; line-height: 1.55; }
.piede a { color: var(--su-blu); text-decoration-color: var(--su-blu-2); }
.piede a:hover { color: #fff; }
.piede :focus-visible { outline-color: var(--su-blu); }
.piede-griglia { display: grid; gap: var(--spazio-m) var(--spazio-l); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.piede h2 { font: 700 1.5rem/1.2 var(--serif); color: var(--su-blu); margin-bottom: 0.5rem; }
.piede p { margin: 0 0 0.6rem; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.piede .dati { color: var(--su-blu-2); }
.piede .importante {
  margin-top: var(--spazio-l); padding-top: 1.5rem; border-top: 1px solid color-mix(in oklch, var(--su-blu) 22%, transparent);
  font-size: var(--piccolo); color: var(--su-blu-2); max-width: 80ch;
}
.piede .importante strong { color: var(--su-blu); font-weight: 700; }
.piede .firma { margin-top: 1rem; font-size: 0.875rem; color: var(--su-blu-2); }

@media print {
  .testata .menu, .lato, .eroe-foto, .canali, .salta { display: none !important; }
  body { background: #fff; color: #000; }
  .piede { background: none; color: #000; }
}