/* ════════════════════════════════════════════════════════════════════
   Daniel Michieletto · v8 — copia del design di Giulia (kit ChatGPT, 01/10/2026)
   Testata bianca, foto dello studio a tutta larghezza, schede con la foto,
   fascia coi tre punti. Misure prese dal design (1536 px → 1440 px: × 0,9375).
   Logo: il file originale del cliente, ricolorato scuro per il fondo bianco.
   ════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/sourcesans3-latin.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  --inchiostro: #0E212A;      /* titoli del design (misurato: quasi nero) */
  --testo: #4D5458;           /* testi del design */
  --primario: #006F67;        /* pulsanti */
  --primario-scuro: #005A53;
  --verde-titolo: #0A6F6B;    /* «Pordenone e Portogruaro» */
  --chiaro: #DDF0EC;          /* cerchi delle icone e delle frecce */
  --carta: #F6F9F9;
  --bianco: #FFFFFF;
  --notte: #10232E;           /* piede */
  --petrolio: #0B4A47;        /* fascia dei contatti */
  --acqua: #8FE0D6;           /* dettagli sui fondi scuri */
  --testo-chiaro: rgba(236, 248, 247, .88);
  --linea: rgba(28, 51, 64, .12);
  --ombra: 0 8px 26px -14px rgba(16, 40, 50, .38);
  --raggio: 10px;
  --gutter: clamp(20px, 4vw, 40px);
  --testata-h: 72px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --font: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--testata-h) + 12px); }
html.avviso-aperto { scroll-padding-bottom: 56px; }
body {
  margin: 0; background: var(--bianco); color: var(--inchiostro);
  font-family: var(--font); font-size: 18px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font); margin: 0; font-weight: 700; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid var(--primario); outline-offset: 3px; border-radius: 4px; }
.contatti :focus-visible, .piede :focus-visible, .cookie-bar :focus-visible { outline-color: var(--acqua); }

.salta { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--primario); color: #fff; padding: .6rem 1rem; border-radius: 6px; font-weight: 700; text-decoration: none; }
.salta:focus { top: 12px; }

.contenitore { width: min(1270px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.titolo-sezione { font-size: clamp(1.85rem, 1.35rem + 1.7vw, 2.55rem); line-height: 1.15; color: var(--inchiostro); }

/* ── pulsanti ─────────────────────────────────────────────────────── */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 50px; padding: .8rem 1.5rem; border-radius: 7px;
  font-family: var(--font); font-weight: 600; font-size: 1.1rem; line-height: 1.15;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.bottone svg { width: 21px; height: 21px; fill: currentColor; flex: none; }
.bottone--luce { background: var(--primario); color: #fff; box-shadow: none; }
.bottone--luce:hover { background: var(--primario-scuro); transform: translateY(-1px); }
.bottone--vetro { background: var(--bianco); color: var(--primario); border-color: rgba(0, 111, 103, .38); }
.bottone--vetro:hover { background: #F1F9F7; border-color: var(--primario); transform: translateY(-1px); }
.bottone--piccolo { min-height: 46px; padding: .55rem 1.4rem; font-size: 1.12rem; }
.bottone--grande { min-height: 56px; padding: .95rem 1.7rem; font-size: 1.1rem; }

/* ── testata bianca ───────────────────────────────────────────────── */
.testata { position: fixed; inset: 0 0 auto 0; z-index: 50; }
.testata__barra {
  height: var(--testata-h); display: flex; align-items: center; gap: 1.5rem;
  padding-inline: max(var(--gutter), calc((100vw - 1400px) / 2)); background: rgba(255, 255, 255, .98);
  box-shadow: 0 1px 0 rgba(28, 51, 64, .06); transition: box-shadow .3s;
}
.testata.scrolled .testata__barra { box-shadow: 0 1px 0 rgba(28, 51, 64, .08), 0 10px 24px -20px rgba(16, 40, 50, .5); }
.testata__logo { flex: none; display: block; }
.testata__logo img { width: clamp(250px, 23vw, 335px); height: auto; }
.testata__nav { display: flex; gap: clamp(1.1rem, 2.1vw, 2rem); margin-left: auto; margin-right: auto; padding-left: 1rem; }
.testata__nav a {
  position: relative; color: var(--inchiostro); text-decoration: none; font-size: .9rem; font-weight: 400; padding: .45rem 0;
  transition: color .2s;
}
.testata__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px;
  background: var(--primario); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.testata__nav a:hover { color: var(--primario); }
.testata__nav a.attivo { color: var(--primario); font-weight: 700; }
.testata__nav a:hover::after, .testata__nav a.attivo::after { transform: scaleX(1); }
.testata__chiama { flex: none; }
@media (min-width: 1101px) { .testata__chiama { min-width: 196px; min-height: 44px; font-size: 1.2rem; } }
.testata__menu {
  display: none; width: 46px; height: 46px; border-radius: 7px; border: 1px solid var(--linea);
  background: var(--bianco); cursor: pointer; position: relative; flex: none;
}
.testata__menu span { position: absolute; left: 13px; right: 13px; top: 22px; height: 2px; background: var(--inchiostro); transition: transform .3s var(--ease); }
.testata__menu span:first-child { transform: translateY(-4px); }
.testata__menu span:last-child { transform: translateY(4px); }
.testata__menu[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.testata__menu[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* menu a tutto schermo (telefono e tablet) */
.menu {
  position: fixed; inset: 0; z-index: 45; background: var(--bianco);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--testata-h) + 3vh) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto; opacity: 0; transition: opacity .3s var(--ease);
}
.menu.aperto { opacity: 1; }
.menu__voci { display: flex; flex-direction: column; }
.menu__voci a {
  font-size: clamp(1.35rem, 5.6vw, 1.9rem); font-weight: 600; color: var(--inchiostro); text-decoration: none;
  padding: .6rem 0; border-bottom: 1px solid var(--linea); transition: color .2s;
}
.menu__voci a:hover { color: var(--primario); }
.menu.aperto .menu__voci a { animation: voce .45s var(--ease) both; }
.menu.aperto .menu__voci a:nth-child(2) { animation-delay: .03s; }
.menu.aperto .menu__voci a:nth-child(3) { animation-delay: .06s; }
.menu.aperto .menu__voci a:nth-child(4) { animation-delay: .09s; }
.menu.aperto .menu__voci a:nth-child(5) { animation-delay: .12s; }
.menu.aperto .menu__voci a:nth-child(6) { animation-delay: .15s; }
.menu.aperto .menu__voci a:nth-child(7) { animation-delay: .18s; }
@keyframes voce { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
.menu__contatti { display: grid; gap: .8rem; margin-top: 2rem; }
body.menu-aperto { overflow: hidden; }
body.menu-aperto .cookie-bar { display: none; }

/* ── 1 · apertura: foto dello studio a tutta larghezza, testo a sinistra ── */
.apertura {
  position: relative; display: flex; align-items: center; overflow: hidden;
  min-height: calc(var(--testata-h) + 474px); padding: calc(var(--testata-h) + 52px) 0 30px; background: #EEF3F3;
}
.apertura__sfondo { position: absolute; inset: var(--testata-h) 0 0 0; }
.apertura__sfondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.apertura::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(244, 248, 248, .97) 0%, rgba(244, 248, 248, .94) 30%, rgba(244, 248, 248, .62) 44%, rgba(244, 248, 248, 0) 58%);
}
.apertura__testo { position: relative; z-index: 2; padding-left: 12px; }
.js .apertura__testo { animation: sale .7s var(--ease) both; }
@keyframes sale { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.apertura__titolo { max-width: 10.4em; font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.3rem); line-height: .98; font-weight: 700; letter-spacing: -.025em; color: var(--inchiostro); }
.apertura__titolo em { font-style: normal; color: var(--verde-titolo); white-space: nowrap; }
.apertura__sotto { max-width: 33rem; margin-top: 1.1rem; font-size: clamp(1.1rem, 1.02rem + .35vw, 1.3rem); color: var(--testo); line-height: 1.3; letter-spacing: .005em; }
.apertura__azioni { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.15rem; }
.apertura__azioni .bottone { min-height: 50px; }
.apertura__fatti { display: flex; flex-wrap: wrap; gap: .5rem 1.35rem; margin-top: 1.55rem; font-size: .85rem; color: var(--testo); }
.apertura__fatti li { display: inline-flex; align-items: center; gap: .5rem; }
.apertura__fatti svg { width: 21px; height: 21px; flex: none; fill: var(--primario); color: var(--primario); }
.apertura__fatti svg.linea { fill: none; }

/* le quattro schede del design: testo a sinistra, foto a destra che sfuma */
.aree { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 19px; }
.js .aree { animation: sale .7s var(--ease) .2s both; }
.aree a {
  position: relative; display: block; height: 100%; min-height: 203px; overflow: hidden; text-decoration: none; color: var(--inchiostro);
  background: var(--bianco); border: 1px solid #ECEEEE; border-radius: 8px; box-shadow: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.aree a:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(16, 40, 50, .45); }
.aree a:focus-visible { outline-offset: -4px; }
.aree img {
  position: absolute; top: 0; right: 0; width: 58%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%);
  transition: transform .6s var(--ease);
}
.aree a:hover img { transform: scale(1.04); }
.aree__testo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: 53%; height: 100%; min-height: 203px; padding: 17px 0 6px 20px; }
.aree__icona { color: var(--primario); }
.aree__icona svg { width: 44px; height: 44px; max-width: none; margin: -5px 0 -5px -5px; }
.aree__testo strong { margin-top: .45rem; font-size: 1.1rem; line-height: 1.02; font-weight: 700; letter-spacing: -.02em; }
.aree__testo small { margin-top: .35rem; margin-bottom: .7rem; font-size: .9rem; line-height: 1.3; color: var(--testo); }
.aree__vai { display: grid; place-items: center; width: 32px; height: 32px; margin-top: auto; border-radius: 50%; background: var(--chiaro); color: var(--primario); transition: background-color .2s, color .2s, transform .25s var(--ease); }
.aree__vai svg { width: 18px; height: 18px; }
.aree a:hover .aree__vai { background: var(--primario); color: #fff; transform: translateX(3px); }

/* la fascia coi tre punti */
.fascia { position: relative; overflow: hidden; margin-top: 32px; padding: 32px 0 44px; background: linear-gradient(180deg, #F4F8F8, #F8FBFB); }
.fascia::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: auto; aspect-ratio: 642 / 409; height: 100%; pointer-events: none;
  background: url("/assets/img/fascia-corridore-2.webp") right bottom / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); mask-image: linear-gradient(90deg, transparent 0, #000 35%);
}
.fascia__punti { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 360px)); column-gap: 27px; }
.fascia__punti li { display: flex; align-items: center; gap: 28px; }
.fascia__cerchio { display: grid; place-items: center; flex: none; width: 71px; height: 71px; border-radius: 50%; background: var(--chiaro); color: var(--primario); transition: transform .3s var(--ease); }
.fascia__punti li:hover .fascia__cerchio { transform: scale(1.05); }
.fascia__cerchio svg { width: 42px; height: 42px; }
.fascia__punti p { font-size: .875rem; line-height: 1.45; color: var(--testo); }
.fascia__punti strong { display: block; margin-bottom: .2rem; font-size: .9rem; font-weight: 600; color: var(--inchiostro); }

/* portatili bassi (1280×720, 1366×657): l'apertura si stringe */
@media (min-width: 1025px) and (max-height: 820px) {
  .apertura { min-height: calc(var(--testata-h) + 400px); padding: calc(var(--testata-h) + 30px) 0 24px; }
  .apertura__titolo { font-size: min(3.3rem, 6.4vh); }
  .apertura__fatti { margin-top: 1.5rem; }
}

/* portatili molto bassi (1366×657): ancora più stretta, così le schede restano sopra la piega */
@media (min-width: 1025px) and (max-height: 700px) {
  .apertura { min-height: calc(var(--testata-h) + 350px); padding: calc(var(--testata-h) + 18px) 0 18px; }
  .apertura__titolo { font-size: min(3.3rem, 6vh); }
  .apertura__sotto { margin-top: .7rem; }
  .apertura__azioni { margin-top: .9rem; }
  .apertura__fatti { margin-top: 1rem; }
  .aree { margin-top: 14px; }
}

/* barra fissa del telefono: Chiama · WhatsApp */
.azioni-fisse { display: none; }

/* ── 2 · dove si localizza il dolore ──────────────────────────────── */
.dolore { background: var(--bianco); padding: clamp(72px, 9vw, 116px) 0; }
.dolore__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(32px, 6vw, 88px); row-gap: 1.6rem; align-items: start; }
.dolore__guida { margin-top: .8rem; max-width: 32rem; color: var(--testo); font-size: 1.15rem; }
.dolore .scelte__gruppo { margin-top: 1.5rem; }
.scelte__gruppo { display: flex; flex-wrap: wrap; gap: .5rem; }
.scelta {
  min-height: 44px; padding: .55rem 1rem; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(0, 111, 103, .38); background: var(--bianco); color: var(--inchiostro);
  font-weight: 600; font-size: 1rem; transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.scelta:hover { border-color: var(--primario); background: #F1F9F7; transform: translateY(-1px); }
.scelta[aria-pressed="true"] { background: var(--primario); border-color: var(--primario); color: #fff; }
.risposta {
  padding: clamp(1.4rem, 3vw, 2.1rem); border-radius: var(--raggio);
  background: var(--bianco); border: 1px solid rgba(28, 51, 64, .06); box-shadow: var(--ombra);
}
.risposta__voce h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.risposta__voce p { margin-top: .5rem; color: var(--testo); font-size: 1.08rem; }
.risposta__voce.entra { animation: entra .4s var(--ease) both; }
@keyframes entra { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
.risposta__via { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1rem !important; }
.risposta__via a { display: inline-flex; align-items: center; gap: .35rem; font-size: 1rem; font-weight: 600; color: var(--primario); text-decoration: underline; text-decoration-color: rgba(0, 111, 103, .35); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.risposta__via a:hover { color: var(--primario-scuro); text-decoration-color: currentColor; }
.risposta__via svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.risposta__via a:hover svg { transform: translateX(3px); }
.risposta__wa { margin-top: 1.4rem; }

/* ── 3 · le prestazioni: schede con la foto, come quelle del design ── */
.prestazioni { background: var(--carta); padding: clamp(72px, 9vw, 116px) 0; }
.prestazioni__testa { max-width: 46rem; margin-bottom: clamp(24px, 3.5vw, 40px); }
.prestazione {
  display: grid; grid-template-columns: 300px minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: start;
  padding: 18px; margin-bottom: 18px; background: var(--bianco); border: 1px solid rgba(28, 51, 64, .06); border-radius: var(--raggio); box-shadow: var(--ombra);
}
.prestazione:last-child { margin-bottom: 0; }
.prestazione__foto { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }
.prestazione__capo { padding-top: .6rem; }
.prestazione__icona { display: block; color: var(--primario); }
.prestazione__icona svg { width: 36px; height: 36px; transition: transform .35s var(--ease); }
.prestazione:hover .prestazione__icona svg { transform: translateY(-3px); }
.prestazione h3 { margin-top: .8rem; font-size: clamp(1.4rem, 1.15rem + .9vw, 1.8rem); line-height: 1.18; }
.prestazione__dove { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; font-size: .98rem; color: var(--testo); }
.prestazione__dove svg { width: 15px; height: 15px; fill: var(--primario); flex: none; }
.prestazione__corpo { padding-top: .6rem; padding-right: .6rem; }
.prestazione__corpo > p { color: var(--testo); font-size: 1.08rem; max-width: 36rem; }
.spunte { margin-top: 1rem; display: grid; gap: .5rem; }
.spunte li { display: flex; align-items: flex-start; gap: .65rem; color: var(--inchiostro); }
.spunte svg { width: 20px; height: 20px; flex: none; color: var(--primario); margin-top: .2rem; }
.prestazione__nota { margin-top: 1.1rem !important; padding: .8rem 1rem; border-left: 3px solid var(--primario); background: #F1F9F7; border-radius: 0 7px 7px 0; font-size: 1rem !important; color: var(--inchiostro) !important; }

.collegamento { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.1rem; font-weight: 600; color: var(--primario); text-decoration: none; }
.collegamento svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--chiaro); transition: transform .25s var(--ease), background-color .2s, color .2s; }
.collegamento:hover { color: var(--primario-scuro); }
.collegamento:hover svg { transform: translateX(3px); background: var(--primario); color: #fff; }

/* ── 4 · come funziona ────────────────────────────────────────────── */
.percorso { background: var(--bianco); padding: clamp(72px, 9vw, 116px) 0; }
.percorso__titolo { margin-bottom: clamp(26px, 4vw, 42px); }
.percorso__passi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.percorso__passi li { display: flex; align-items: flex-start; gap: 18px; }
.percorso__n { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--chiaro); font-size: 1.3rem; font-weight: 700; color: var(--primario); }
.percorso__passi p { font-size: 1.02rem; line-height: 1.45; color: var(--testo); }
.percorso__passi strong { display: block; margin: .25rem 0 .2rem; font-size: 1.08rem; color: var(--inchiostro); font-weight: 700; }

/* ── 5 · chi siamo ────────────────────────────────────────────────── */
.chi { background: var(--carta); padding: clamp(72px, 9vw, 116px) 0; }
.chi__griglia { display: grid; grid-template-columns: 340px minmax(0, 1fr) 320px; gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.chi__foto { margin: 0; border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra); }
.chi__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 30%; }
.chi__lead { margin-top: 1rem; font-size: clamp(1.1rem, 1.04rem + .3vw, 1.25rem); color: var(--testo); max-width: 38rem; }
.chi__obiettivo { margin-top: 1.1rem; padding-left: 1rem; border-left: 3px solid var(--primario); font-size: 1.12rem; color: var(--inchiostro); max-width: 36rem; }
.chi__cta { margin-top: 1.8rem; }
.numeri { display: grid; background: var(--bianco); border: 1px solid rgba(28, 51, 64, .06); border-radius: var(--raggio); box-shadow: var(--ombra); }
.numeri li { display: grid; grid-template-columns: 4rem 1fr; gap: .9rem; align-items: center; padding: 1.15rem 1.3rem; }
.numeri li + li { border-top: 1px solid var(--linea); }
.numeri strong { font-size: 2.1rem; line-height: 1; font-weight: 700; color: var(--primario); font-variant-numeric: tabular-nums; }
.numeri span { font-size: 1rem; line-height: 1.4; color: var(--testo); }

/* ── 6 · sedi ─────────────────────────────────────────────────────── */
.dove { background: var(--bianco); padding: clamp(72px, 9vw, 116px) 0; }
.dove__avviso { margin-top: .8rem; font-size: 1.12rem; color: var(--testo); }
.dove__schede { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 24px); margin-top: clamp(24px, 4vw, 38px); }
.sede { padding: clamp(1.3rem, 3vw, 1.9rem); border-radius: var(--raggio); background: var(--bianco); border: 1px solid rgba(28, 51, 64, .06); box-shadow: var(--ombra); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sede:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(16, 40, 50, .45); }
.sede h3 { display: flex; align-items: center; gap: .7rem; font-size: 1.45rem; }
.sede h3 svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--chiaro); fill: var(--primario); flex: none; transition: transform .3s var(--ease); }
.sede:hover h3 svg { transform: translateY(-2px); }
.sede__nome { margin-top: .5rem; font-weight: 700; color: var(--primario); }
.sede p + p { margin-top: .2rem; color: var(--testo); }
.sede .sede__cosa { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--linea); font-size: 1rem; }
.sede__link { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.dove__casa { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem; color: var(--testo); font-size: 1.05rem; }
.dove__casa svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--chiaro); flex: none; fill: var(--primario); }
.dove__casa strong { color: var(--inchiostro); }

/* ── 7 · domande ──────────────────────────────────────────────────── */
.domande { background: var(--carta); padding: clamp(72px, 9vw, 116px) 0; }
.domande__griglia { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.domande__testa { position: sticky; top: calc(var(--testata-h) + 40px); }
.domande__elenco { background: var(--bianco); border: 1px solid rgba(28, 51, 64, .06); border-radius: var(--raggio); box-shadow: var(--ombra); padding: .3rem 1.4rem; }
.domanda + .domanda { border-top: 1px solid var(--linea); }
.domanda summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0; font-weight: 600; font-size: clamp(1.06rem, 1.02rem + .3vw, 1.18rem); line-height: 1.3; transition: color .2s;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary svg { width: 32px; height: 32px; flex: none; padding: 7px; border-radius: 50%; background: var(--chiaro); color: var(--primario); transition: transform .3s var(--ease), background-color .2s, color .2s; }
.domanda[open] summary svg { transform: rotate(45deg); background: var(--primario); color: #fff; }
.domanda summary:hover { color: var(--primario); }
.domanda p { padding: 0 3rem 1.2rem 0; color: var(--testo); font-size: 1.06rem; }

/* ── 8 · contatti ─────────────────────────────────────────────────── */
.contatti { color: #fff; text-align: center; padding: clamp(64px, 8vw, 96px) 0; background: var(--petrolio); }
.contatti .titolo-sezione { color: #fff; }
.contatti__corpo p { margin-top: .9rem; font-size: 1.18rem; color: var(--testo-chiaro); }
.contatti__numero { font-weight: 700; color: var(--acqua); text-decoration: none; white-space: nowrap; transition: color .2s; }
.contatti__numero:hover { color: #fff; }
.contatti__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.8rem; }
.contatti .bottone--luce { background: #fff; color: var(--primario); box-shadow: none; }
.contatti .bottone--luce:hover { background: var(--chiaro); }
.contatti .bottone--vetro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.contatti .bottone--vetro:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

/* ── piede ────────────────────────────────────────────────────────── */
.piede { background: var(--notte); color: rgba(236, 248, 247, .78); padding: clamp(52px, 7vw, 76px) 0 calc(28px + env(safe-area-inset-bottom)); font-size: 1rem; }
.piede__griglia { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
.piede__marchio img { width: min(340px, 100%); height: auto; }
.piede__titolo { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acqua); font-weight: 700; margin-bottom: .9rem; }
.piede__lista { display: grid; gap: .65rem; }
.piede__lista a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; transition: color .2s; overflow-wrap: anywhere; }
.piede__lista a:hover { color: #fff; }
.piede__lista svg { width: 18px; height: 18px; flex: none; fill: currentColor; color: var(--acqua); transition: transform .25s var(--ease); }
.piede__lista a:hover svg { transform: translateX(2px); }
.piede__legale {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; margin-top: clamp(36px, 5vw, 56px);
  padding-top: 1.3rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .92rem;
}
.piede__legale a { color: #fff; transition: color .2s; }
.piede__legale a:hover { color: var(--acqua); }
.credit a { color: var(--acqua); font-weight: 600; }

/* ── cookie ───────────────────────────────────────────────────────── */
.cookie-bar {
  position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; gap: 1rem; align-items: center; justify-content: center;
  padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom)); font-size: .86rem; line-height: 1.35;
  background: rgba(16, 35, 46, .97); color: rgba(236, 248, 247, .86);
  animation: avviso .5s var(--ease) .8s both;
}
@keyframes avviso { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
.cookie-bar p { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cookie-bar__corto { display: none; }
.cookie-bar a { flex: none; color: var(--acqua); text-underline-offset: 2px; }
.cookie-bar__x { background: none; border: 0; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; opacity: .7; padding: .2rem .4rem; transition: opacity .2s; }
.cookie-bar__x:hover { opacity: 1; }

html.avviso-aperto body { padding-bottom: calc(42px + env(safe-area-inset-bottom)); }

/* ── comparsa leggera allo scroll + ripiego ───────────────────────── */
@supports (animation-timeline: view()) {
  .rv { animation: comparsa linear both; animation-timeline: view(); animation-range: entry 0% cover 18%; }
  @keyframes comparsa { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
}
.no-sda .rv { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.no-sda .rv.in { opacity: 1; transform: none; }

/* ════════════════ responsive ════════════════ */

@media (min-width: 1261px) { .testata__nav { gap: 2rem; margin-left: 88px; } }
@media (min-width: 761px) and (max-width: 1260px) {
  .apertura__fatti li { background: rgba(244, 248, 248, .9); padding: .15rem .55rem; border-radius: 6px; }
  .fascia::after { opacity: .5; }
}

@media (max-width: 1260px) {
  .testata__nav { gap: 1.1rem; }
  .testata__logo img { width: 250px; }
  .chi__griglia { grid-template-columns: 300px minmax(0, 1fr); }
  .chi__griglia .numeri { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chi__griglia .numeri li + li { border-top: 0; border-left: 1px solid var(--linea); }
}

@media (max-width: 1100px) {
  .testata__nav { display: none; }
  .testata__chiama { margin-left: auto; }
  .testata__menu { display: block; }
  .aree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fascia__punti { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .fascia__punti li { gap: 16px; }
  .fascia::after { opacity: .5; }
  .piede__griglia { grid-template-columns: 1fr 1fr; }
  .piede__marchio { grid-column: 1 / -1; }
  .percorso__passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prestazione { grid-template-columns: 240px minmax(0, 1fr); }
  .prestazione__corpo { grid-column: 2; padding-top: 0; }
  .prestazione__foto { grid-row: span 2; }
}

/* telefoni e tablet in verticale: foto sopra, testo sotto */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .apertura { display: block; min-height: 0; padding: var(--testata-h) 0 30px; background: var(--carta); }
  .apertura::before { display: none; }
  .apertura__sfondo, .apertura__sfondo img { position: static; height: auto; inset: auto; }
  .apertura__sfondo img { width: 100%; aspect-ratio: 4 / 3; max-height: 52svh; object-fit: cover; object-position: 50% 20%; }
  .apertura__testo { padding: 1.5rem 0 0; }
  .apertura__titolo { max-width: none; }
  .apertura__titolo em { white-space: normal; }
}
@media (max-width: 760px) and (orientation: landscape) {
  .apertura__sfondo img { aspect-ratio: auto; height: 70svh; max-height: none; }
}

@media (max-width: 900px) {
  .dolore__griglia { grid-template-columns: 1fr; }
  .prestazione { grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden; }
  .prestazione__foto { grid-row: auto; aspect-ratio: auto; height: clamp(180px, 50vw, 260px); border-radius: 0; }
  .prestazione__capo { padding: 1.1rem 1.2rem 0; }
  .prestazione__corpo { grid-column: auto; padding: .9rem 1.2rem 1.3rem; }
  .domande__griglia { grid-template-columns: 1fr; }
  .domande__testa { position: static; }
  .chi__griglia { grid-template-columns: 1fr; }
  .chi__foto { width: min(80vw, 360px); }
  .fascia__punti { grid-template-columns: 1fr; row-gap: 18px; }
  .fascia::after { width: 260px; opacity: .35; }
}

@media (max-width: 760px) {
  :root { --testata-h: 64px; }
  body { font-size: 17px; }
  .testata__barra { gap: .6rem; }
  .testata__logo { flex: 0 1 230px; min-width: 0; }
  .testata__logo img { width: 100%; max-width: 230px; }
  .cookie-bar__lungo { display: none; }
  .cookie-bar__corto { display: inline; }
  .testata__chiama span { display: none; }
  .testata__chiama { width: 46px; padding: 0; min-height: 46px; }
  .testata__chiama svg { width: 20px; height: 20px; }

  .apertura__titolo { font-size: clamp(1.95rem, 8.2vw, 2.4rem); }
  .apertura__azioni { flex-direction: column; align-items: stretch; }
  .apertura__fatti { flex-direction: column; gap: .45rem; margin-top: 1.4rem; }
  .aree { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .aree a, .aree__testo { min-height: 160px; }
  .aree img { width: 48%; }
  .aree__testo { width: 62%; padding: 14px 0 14px 16px; }
  .aree__icona svg { width: 38px; height: 38px; }
  .aree__testo strong { font-size: 1.08rem; margin-top: .5rem; }
  .aree__testo small { font-size: .9rem; }
  .fascia { margin-top: 28px; padding: 30px 0; }
  .fascia__cerchio { width: 60px; height: 60px; }
  .fascia__cerchio svg { width: 28px; height: 28px; }

  .azioni-fisse {
    position: fixed; inset: auto 0 0 0; z-index: 55; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--bianco); border-top: 1px solid var(--linea);
    transform: translate3d(0, 110%, 0); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s;
  }
  .azioni-fisse.visibile { transform: none; visibility: visible; transition-delay: 0s; }
  .azioni-fisse a {
    display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; border-radius: 7px;
    font-weight: 600; text-decoration: none; font-size: 1.02rem;
  }
  .azioni-fisse a:first-child { background: var(--primario); color: #fff; }
  .azioni-fisse a:last-child { border: 1px solid rgba(0, 111, 103, .45); color: var(--primario); }
  .azioni-fisse svg { width: 20px; height: 20px; fill: currentColor; }
  html.barra-fissa { scroll-padding-bottom: 80px; }
  html.barra-fissa.avviso-aperto { scroll-padding-bottom: 135px; }
  html.barra-fissa .cookie-bar { bottom: calc(65px + env(safe-area-inset-bottom)); padding-bottom: .55rem; }
  html.barra-fissa body { padding-bottom: calc(65px + env(safe-area-inset-bottom)); }
  html.barra-fissa.avviso-aperto body { padding-bottom: calc(115px + env(safe-area-inset-bottom)); }
  .cookie-bar__x { min-width: 44px; min-height: 44px; }
  body.menu-aperto .azioni-fisse { display: none; }

  .scelta { font-size: .97rem; padding: .5rem .85rem; }
  .risposta__wa { width: 100%; }

  .percorso__passi { grid-template-columns: 1fr; gap: 1.1rem; }
  .chi__griglia .numeri { grid-template-columns: 1fr; }
  .chi__griglia .numeri li + li { border-left: 0; border-top: 1px solid var(--linea); }
  .numeri li { padding: 1rem 1.1rem; grid-template-columns: 3.6rem 1fr; }
  .numeri strong { font-size: 1.9rem; }
  .dove__schede { grid-template-columns: 1fr; }
  .domande__elenco { padding: .2rem 1rem; }
  .domanda p { padding-right: 0; }
  .contatti__azioni .bottone, .chi__cta { width: 100%; }
  .piede__griglia { grid-template-columns: 1fr; }
  .cookie-bar { font-size: .8rem; padding-inline: .8rem; gap: .6rem; }
}

/* ════════════════════════════════════════════════════════════════════
   UPGRADE v12 (02/10/2026) — stessa base, più chiara e più leggibile.
   Va PRIMA di «@media (prefers-reduced-motion: reduce)»: sovrascrive le regole sopra.
   ════════════════════════════════════════════════════════════════════ */

/* ── 0 · base comune ── */
:root { --menta: #EAF5F2; --nota: #F1F9F7; --ombra-su: 0 22px 44px -26px rgba(16, 40, 50, .42); }
.titolo-sezione { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem); line-height: 1.12; }
h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ── 1 · testata ── */
.testata__nav a { font-size: .95rem; font-weight: 500; white-space: nowrap; }
.testata__nav a::after { height: 2px; }
@media (min-width: 1261px) and (max-width: 1439px) { .testata__nav { gap: 1.5rem; margin-left: 40px; } }
.testata__wa { display: none; }
.testata__wa svg { width: 22px; height: 22px; }
@media (min-width: 1340px), (min-width: 761px) and (max-width: 1100px) {
  .testata__wa { display: inline-flex; flex: none; width: 46px; min-height: 46px; padding: 0; }
}
@media (min-width: 1340px) { .testata__wa { width: 44px; min-height: 44px; margin-right: -.7rem; } }
@media (min-width: 761px) and (max-width: 1100px) {
  .testata__wa { margin-left: auto; margin-right: -.8rem; }
  .testata__chiama { margin-left: 0; }
}

/* ── 2 · apertura: zone in grassetto, sedi su etichette leggibili sopra la foto ── */
.apertura__sotto strong { font-weight: 600; color: var(--inchiostro); }
.apertura__fatti { gap: .5rem; font-size: .92rem; color: var(--inchiostro); }
.apertura__fatti li {
  position: relative; padding: .3rem .8rem .3rem .6rem; line-height: 1.3; border-radius: 7px;
  background: rgba(255, 255, 255, .9); border: 1px solid rgba(28, 51, 64, .08);
}
.apertura__fatti svg { width: 18px; height: 18px; }
.apertura__fatti strong { font-weight: 700; }
.apertura__fatti a { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; transition: color .2s; }
.apertura__fatti a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.apertura__fatti li:has(a):hover { border-color: rgba(0, 111, 103, .45); }
.apertura__fatti a:hover { color: var(--primario); }
@media (min-width: 1025px) and (max-height: 820px) { .apertura__fatti { margin-top: 1.1rem; } }
@media (min-width: 1025px) and (max-height: 700px) { .apertura__fatti { margin-top: .8rem; } }
@media (max-width: 760px) {
  .apertura__fatti { align-items: flex-start; font-size: .95rem; }
  .apertura__fatti li { padding: .4rem .8rem .4rem .6rem; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .apertura__sfondo img { aspect-ratio: 16 / 10; object-position: 50% 18%; }
}

/* ── 3 · le quattro schede: da telefono il testo non va più sopra la foto ── */
.aree a:hover { border-color: rgba(0, 111, 103, .28); }
@media (max-width: 760px) {
  .aree a, .aree__testo { min-height: 150px; }
  .aree__testo { width: 60%; padding: 16px 0 14px 18px; }
  .aree__testo small { max-width: 11.5em; }
  .aree img { width: 46%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%); mask-image: linear-gradient(90deg, transparent 0, #000 40%); }
}

/* ── 4 · fascia coi 3 cerchi: testi più grandi, frecce fra le tappe ── */
.fascia__punti p { font-size: .98rem; }
.fascia__punti strong { font-size: 1.08rem; font-weight: 700; }
@media (min-width: 901px) {
  .fascia__punti { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 64px; }
  .fascia__punti li { position: relative; gap: 22px; }
  .fascia__punti li + li::before {
    content: ""; position: absolute; left: -43px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23006F67' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .fascia__punti { column-gap: 44px; }
  .fascia__punti li { gap: 14px; }
  .fascia__punti li + li::before { left: -33px; }
}
@media (max-width: 900px) { .fascia::after { width: auto; height: 62%; opacity: .25; } }

/* ── 5 · dove si localizza il dolore ── */
.dolore .scelte__gruppo { display: grid; gap: .6rem; margin-top: 1.5rem; }
.scelte__zone, .scelte__disturbi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.scelte__disturbi { padding-top: .9rem; margin-top: .3rem; border-top: 1px solid var(--linea); }
.scelta--larga { grid-column: 1 / -1; }
.scelta { display: flex; align-items: center; gap: .65rem; min-height: 54px; padding: .55rem .9rem; text-align: left; line-height: 1.2; font-size: 1.02rem; }
.scelta svg {
  width: 22px; height: 22px; flex: none; padding: 3px; border-radius: 50%;
  border: 1.5px solid rgba(0, 111, 103, .45); color: transparent; transition: background-color .2s, border-color .2s, color .2s;
}
.scelta[aria-pressed="true"] svg { background: var(--bianco); border-color: var(--bianco); color: var(--primario); }

.risposta { padding: 0; overflow: hidden; }
.risposta__foto { width: 100%; object-fit: cover; background: var(--carta); }
.risposta__foto.entra { animation: dissolve .45s var(--ease) both; }
@keyframes dissolve { from { opacity: .35; } to { opacity: 1; } }
.risposta__corpo { padding: clamp(1.4rem, 2.6vw, 2.1rem); }
.risposta__via { flex-direction: column; align-items: flex-start; gap: 1.6rem; margin-top: 1.2rem !important; }
.risposta__via a {
  position: relative; min-height: 46px; gap: .6rem; padding: .35rem 1rem .35rem .4rem; border: 1px solid rgba(0, 111, 103, .38); border-radius: 7px;
  color: var(--inchiostro); text-decoration: none; line-height: 1.25; background: var(--bianco); transition: background-color .2s, border-color .2s;
}
.risposta__via a:hover { color: var(--inchiostro); border-color: var(--primario); background: var(--nota); }
.risposta__via svg { width: 34px; height: 34px; flex: none; padding: 6px; border-radius: 50%; background: var(--chiaro); color: var(--primario); }
.risposta__via a:hover svg { transform: none; }
.risposta__via a + a::before {
  content: ""; position: absolute; left: 17px; top: -26px; width: 22px; height: 22px; transform: rotate(90deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23006F67' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 1101px) {
  .dolore__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .risposta { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
  .risposta__foto { height: 100%; contain: size; }
}
@media (max-width: 1100px) { .risposta__foto { height: clamp(150px, 26vw, 220px); object-position: 50% 62%; } }
@media (max-width: 760px) {
  .scelta { font-size: 1rem; padding: .5rem .75rem; gap: .55rem; }
  .risposta__corpo { padding: 1.3rem 1.2rem 1.4rem; }
}

/* ── 6 · le prestazioni: foto grande alternata, luogo su etichetta, pulsante WhatsApp ── */
.prestazione__capo { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; }
.prestazione__icona { grid-row: 1 / 3; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--chiaro); }
.prestazione__icona svg { width: 32px; height: 32px; }
.prestazione h3 { margin-top: 0; }
.prestazione__dove {
  justify-self: start; margin-top: .4rem; padding: .2rem .7rem .2rem .5rem; border-radius: 6px;
  background: var(--nota); border: 1px solid rgba(0, 111, 103, .2); color: var(--inchiostro); font-weight: 600; font-size: .95rem; line-height: 1.4;
}
.prestazione__dove svg { width: 17px; height: 17px; }
.prestazione__cta { margin-top: 1.5rem; min-height: 48px; font-size: 1.05rem; }
.prestazione__cta svg { width: 20px; height: 20px; }
@media (min-width: 901px) {
  .prestazione {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: 0; padding: 0; overflow: hidden;
    align-items: stretch; margin-bottom: 26px; transition: box-shadow .35s var(--ease);
  }
  .prestazione:hover { box-shadow: var(--ombra-su); }
  .prestazione__foto { grid-column: 1; grid-row: 1 / 3; width: 100%; height: 100%; min-height: 320px; aspect-ratio: auto; border-radius: 0; contain: size; }
  .prestazione__capo { grid-column: 2; grid-row: 1; padding: clamp(1.6rem, 2.6vw, 2.2rem) clamp(1.8rem, 3.6vw, 3.2rem) 0; }
  .prestazione__corpo { grid-column: 2; grid-row: 2; padding: 1.1rem clamp(1.8rem, 3.6vw, 3.2rem) clamp(1.6rem, 2.6vw, 2.2rem); }
  .prestazione:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .prestazione:nth-of-type(even) .prestazione__foto { grid-column: 2; }
  .prestazione:nth-of-type(even) .prestazione__capo, .prestazione:nth-of-type(even) .prestazione__corpo { grid-column: 1; }
}
@media (max-width: 900px) {
  .prestazione__foto { height: clamp(200px, 56vw, 300px); }
  .prestazione__capo { padding: 1.2rem 1.2rem 0; }
  .prestazione__icona { grid-row: auto; width: 48px; height: 48px; }
  .prestazione__dove { grid-column: 1 / -1; margin-top: .75rem; }
  .prestazione__icona svg { width: 28px; height: 28px; }
  .prestazione__cta { width: 100%; }
}

/* ── 7 · come funziona: fascia menta, quattro schede unite da un filo, si comincia dal passo 1 ── */
.percorso { background: var(--menta); }
.percorso__passi { --passo: clamp(18px, 2.4vw, 30px); gap: var(--passo); }
.percorso__passi li {
  position: relative; flex-direction: column; gap: 1rem; padding: 1.5rem 1.5rem 1.6rem;
  background: var(--bianco); border-radius: var(--raggio); box-shadow: 0 10px 26px -20px rgba(16, 40, 50, .5);
}
.percorso__n { width: 52px; height: 52px; }
.percorso__passi li:first-child .percorso__n { background: var(--primario); color: #fff; }
.percorso__passi p { font-size: 1.05rem; }
.percorso__passi strong { margin: 0 0 .3rem; font-size: 1.2rem; }
.percorso__passi p a { color: var(--primario); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0, 111, 103, .35); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.percorso__passi p a:hover { text-decoration-color: currentColor; }
.percorso__passi li:not(:last-child)::after {
  content: ""; position: absolute; top: calc(1.5rem + 25px); left: 100%; width: var(--passo); height: 2px; background: rgba(0, 111, 103, .45);
}
@media (min-width: 761px) and (max-width: 1100px) { .percorso__passi li:nth-child(2n)::after { display: none; } }
@media (max-width: 760px) {
  .percorso__passi li { flex-direction: row; gap: 1rem; padding: 1.2rem; }
  .percorso__passi li:not(:last-child)::after { top: 100%; left: calc(1.2rem + 25px); width: 2px; height: var(--passo); }
}

/* ── 8 · chi siamo: due colonne, la foto vera con la cornice menta, i numeri in riga ── */
.chi { background: var(--bianco); }
.chi__foto { position: relative; overflow: visible; box-shadow: none; isolation: isolate; border-radius: 0; }
.chi__foto::before { content: ""; position: absolute; z-index: -1; inset: 22px -22px -22px 22px; border-radius: var(--raggio); background: var(--chiaro); }
.chi__foto img { border-radius: var(--raggio); box-shadow: var(--ombra); }
@media (min-width: 901px) {
  .chi__griglia {
    grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); grid-template-areas: "foto testo" "foto numeri";
    column-gap: clamp(56px, 7vw, 110px); row-gap: 2rem; align-items: start;
  }
  .chi__foto { grid-area: foto; align-self: center; width: 100%; max-width: 400px; margin-bottom: 22px; }
  .chi__testo { grid-area: testo; align-self: end; }
  .chi__griglia .numeri { grid-area: numeri; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chi__griglia .numeri li { grid-template-columns: 1fr; gap: .4rem; align-content: start; padding: 1.2rem 1.4rem; }
  .chi__griglia .numeri li + li { border-top: 0; border-left: 1px solid var(--linea); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .chi__foto { width: min(76vw, 340px); margin-bottom: 14px; }
  .chi__foto::before { inset: 14px -14px -14px 14px; }
}
@media (max-width: 760px) {
  .chi__foto { width: 100%; }
  .chi__foto::before { display: none; }
  .chi__foto img { aspect-ratio: 5 / 4; object-position: 60% 24%; }
}

/* ── 9 · dove siamo: tre posti alla pari, pulsanti veri ── */
.dove { background: var(--carta); }
.dove__avviso {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem; padding: .45rem .9rem;
  border-radius: 7px; background: var(--chiaro); color: var(--inchiostro); font-weight: 600; font-size: 1.05rem; line-height: 1.35;
}
.dove__avviso svg { width: 20px; height: 20px; flex: none; color: var(--primario); }
.dove__schede { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sede { display: flex; flex-direction: column; }
.sede__nome + p { color: var(--inchiostro); }
.sede .sede__azioni { display: grid; gap: .6rem; margin-top: auto; padding-top: 1.3rem; }
.sede__azioni .bottone { min-height: 48px; padding: .7rem 1.2rem; font-size: 1.02rem; }
.sede--casa { background: var(--menta); border-color: rgba(0, 111, 103, .14); box-shadow: none; }
.sede--casa h3 svg { background: var(--bianco); }
.sede--casa .sede__testo { margin-top: .8rem; color: var(--inchiostro); font-size: 1.06rem; }
@media (max-width: 1100px) {
  .dove__schede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sede--casa { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .dove__avviso { align-items: flex-start; }
  .dove__avviso svg { margin-top: .1rem; }
  .dove__schede { grid-template-columns: 1fr; }
}

/* ── 10 · domande frequenti: risposte già aperte ── */
.domande { background: var(--bianco); }
.domande__griglia { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3.5vw, 38px); }
.domande__testa { position: static; }
.domande__elenco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 0; background: none; border: 0; box-shadow: none; }
.domande__elenco .domanda { padding: 1.35rem 1.5rem; background: var(--bianco); border: 1px solid rgba(28, 51, 64, .06); border-radius: var(--raggio); box-shadow: var(--ombra); }
.domanda h3 { font-size: clamp(1.1rem, 1.04rem + .3vw, 1.22rem); line-height: 1.3; letter-spacing: -.01em; }
.domande__elenco .domanda p { margin-top: .45rem; padding: 0; }
.domanda p strong { color: var(--primario); }
.domanda p a { color: var(--primario); font-weight: 600; text-decoration-color: rgba(0, 111, 103, .35); text-underline-offset: 3px; }
@media (max-width: 760px) {
  .domande__elenco { grid-template-columns: 1fr; gap: 12px; padding: 0; }
  .domande__elenco .domanda { padding: 1.1rem 1.2rem; }
}

/* ── 11 · fissa un appuntamento: il numero è il protagonista ── */
.contatti { padding: clamp(72px, 9vw, 116px) 0; }
.contatti__corpo p { margin-top: 1.1rem; font-size: 1.2rem; }
.contatti__numero {
  display: block; width: fit-content; margin: .3rem auto .35rem; font-size: clamp(2.5rem, 1.5rem + 4vw, 4.2rem); line-height: 1.05;
  letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums;
}
.contatti__numero:hover { color: var(--acqua); }
.contatti__azioni { gap: 1rem; margin-top: 2rem; }
.contatti .bottone--grande { min-width: 230px; min-height: 58px; font-size: 1.15rem; }
@media (max-width: 760px) { .contatti .bottone--grande { min-width: 0; } }

/* ── 12 · piede ── */
.piede__titolo { font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: #fff; }
.piede__numero { font-weight: 700; color: #fff; }
.piede__regola { display: inline-flex; align-items: center; gap: .6rem; }
.piede__regola svg { fill: none; }

/* ── 13 · barra fissa del telefono: ombra, sparisce sopra i contatti e il piede ── */
@media (max-width: 760px) {
  .azioni-fisse { border-top: 0; box-shadow: 0 -12px 26px -20px rgba(16, 40, 50, .55); }
  .azioni-fisse a { min-height: 50px; font-size: 1.05rem; }
  html.barra-fissa .cookie-bar { bottom: calc(66px + env(safe-area-inset-bottom)); }
  /* la barra non è mai visibile in fondo alla pagina: niente spazio bianco sotto il piede */
  html.barra-fissa body { padding-bottom: 0; }
  html.barra-fissa.avviso-aperto body { padding-bottom: calc(42px + env(safe-area-inset-bottom)); }
  html.barra-giu .cookie-bar { bottom: 0; padding-bottom: calc(.55rem + env(safe-area-inset-bottom)); }
}


/* ── ritocchi dopo la verifica della v10 ── */
/* portatili bassi alla prima visita: con l'avviso cookie aperto le schede devono restare sopra l'avviso */
@media (min-width: 1025px) and (max-height: 760px) {
  html.avviso-aperto .apertura { min-height: calc(var(--testata-h) + 355px); padding: calc(var(--testata-h) + 18px) 0 16px; }
  html.avviso-aperto .apertura__titolo { font-size: min(3.3rem, 5.8vh); }
  html.avviso-aperto .apertura__sotto { margin-top: .7rem; }
  html.avviso-aperto .apertura__azioni { margin-top: .9rem; }
  html.avviso-aperto .apertura__fatti { margin-top: 1rem; }
  html.avviso-aperto .aree { margin-top: 14px; }
}
@media (min-width: 1025px) and (max-height: 700px) {
  html.avviso-aperto .apertura { min-height: calc(var(--testata-h) + 312px); padding: calc(var(--testata-h) + 12px) 0 12px; }
  html.avviso-aperto .apertura__titolo { font-size: min(3.3rem, 5.4vh); }
  html.avviso-aperto .apertura__sotto { margin-top: .5rem; }
  html.avviso-aperto .apertura__azioni { margin-top: .7rem; }
  html.avviso-aperto .apertura__fatti { margin-top: .7rem; }
  html.avviso-aperto .aree { margin-top: 12px; }
}
/* da telefono l'avviso è alto 62 px: il focus da tastiera si ferma sopra */
@media (max-width: 760px) { html.avviso-aperto { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); } }

/* ── ritocchi dopo la verifica della v12 ── */
/* schede dell'apertura fra 1101 e 1279: le parole lunghe restano nella colonna di testo */
@media (min-width: 1101px) and (max-width: 1279px) {
  .aree__testo { width: 62%; padding-left: 16px; }
  .aree img { width: 48%; }
}

/* ── foto d'apertura INTERA da computer (02/10, Giulia: «la hero mi sembra tagliata») ──
   La foto è 2:1 e la fascia è più larga che alta: riempiendo la larghezza si tagliava sotto (a 1440 si vedeva il 66%,
   a 1920 il 49%). Ora la foto sta alta quanto la fascia, intera, appoggiata a destra, e sfuma a sinistra sotto il testo. */
@media (min-width: 1025px), (min-width: 761px) and (orientation: landscape) {
  .apertura { background: #F4F8F8; }
  .apertura__sfondo { overflow: hidden; }
  .apertura__sfondo img {
    inset: 0 0 0 auto; width: auto; height: 100%; max-width: none; object-fit: fill;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%);
  }
}
/* sugli schermi grandi la fascia cresce un po', così la foto non resta piccola */
@media (min-width: 1025px) and (min-height: 821px) { .apertura { min-height: calc(var(--testata-h) + clamp(474px, 31vw, 600px)); } }

/* ── titolo più lungo (02/10 pomeriggio: «aggiungere al titolo anche MICROCIRCOLAZIONE») ──
   Da computer il titolo resta su 3 righe; sui portatili bassi apertura e schede si stringono un po',
   così le quattro schede restano sopra la piega anche con l'avviso cookie aperto. */
@media (min-width: 1025px) { .apertura__titolo { max-width: 13.2em; } }
@media (min-width: 1025px) and (max-height: 820px) {
  .apertura { min-height: calc(var(--testata-h) + 340px); }
  html.avviso-aperto .apertura { min-height: calc(var(--testata-h) + 300px); }
  .aree a, .aree__testo { min-height: 0; }
  .aree__testo { padding-top: 14px; padding-bottom: 12px; }
  .aree__testo small { font-size: .84rem; margin-bottom: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv, .no-sda .rv { opacity: 1 !important; transform: none !important; }
}