/* --- caratteri ospitati in locale --- */
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/font/jost-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/font/jost-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/font/jost-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/font/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/font/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/font/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/font/inter-latin-700-normal.woff2') format('woff2')}


/* ==========================================================================
   Physiomood — Design System
   Centro di Fisioterapia e Riabilitazione — Ca' Rainati (TV)
   --------------------------------------------------------------------------
   Palette e tipografia sono definite qui sotto in un unico punto:
   per cambiare i colori del sito basta modificare le variabili in :root.
   ========================================================================== */

/* --- 1. Token di design ------------------------------------------------- */

:root {
  /* ---------------------------------------------------------------------
     COLORI DEL MARCHIO — presi dal manuale logo Physiomood
       Pantone 315 C  ->  #016780   (petrolio, colore istituzionale)
       Pantone 7466 C ->  #00ACBA   (turchese, colore di accento)
       Nero del logo  ->  #231F20
     Tutto il sito discende da questi tre valori: non introdurre altri
     colori di marca senza aggiornare il manuale.
     --------------------------------------------------------------------- */
  --petrolio:        #016780;
  --petrolio-scuro:  #01475A;
  --petrolio-chiaro: #0A7C97;

  --turchese:        #00ACBA;   /* accento, sfondi e grafica */
  --turchese-scuro:  #018E9B;   /* stato hover */
  --turchese-testo:  #01717E;   /* stesso accento, leggibile sul bianco */

  --acqua:           #6FC6CF;   /* turchese schiarito, su fondi scuri */
  --acqua-chiara:    #E7F5F7;   /* fondo sezione */

  /* Neutri, virati leggermente sul freddo per accordarsi al petrolio */
  --sabbia:      #F5F8F9;
  --sabbia-scura:#E9F0F2;
  --bianco:      #FFFFFF;
  --inchiostro:  #231F20;
  --testo:       #414748;
  --tenue:       #6C7477;
  --linea:       #DFE7E9;

  /* Stati */
  --successo:    #17795E;
  --avviso:      #9A5B12;

  /* Tipografia — Jost richiama il carattere geometrico del logo */
  --font-display: "Jost", "Futura", "Century Gothic", "Inter", sans-serif;
  --font-testo:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Scala tipografica fluida */
  --t-xs:   0.8125rem;
  --t-sm:   0.9125rem;
  --t-base: 1.0625rem;
  --t-md:   clamp(1.125rem, 0.4vw + 1.02rem, 1.25rem);
  --t-lg:   clamp(1.35rem, 0.8vw + 1.15rem, 1.65rem);
  --t-xl:   clamp(1.65rem, 1.6vw + 1.25rem, 2.3rem);
  --t-2xl:  clamp(2rem, 2.6vw + 1.4rem, 3.1rem);
  --t-3xl:  clamp(2.4rem, 4vw + 1.4rem, 4.1rem);

  /* Spaziatura */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 5.5rem;   --s-10: 7.5rem;

  /* Forme */
  --r-sm: 5px;  --r-md: 8px;   --r-lg: 12px;  --r-xl: 16px;  --r-full: 999px;

  /* Ombre */
  --om-1: 0 1px 2px rgba(1,71,90,.05), 0 2px 8px rgba(1,71,90,.05);
  --om-2: 0 2px 6px rgba(1,71,90,.07), 0 10px 26px rgba(1,71,90,.08);
  --om-3: 0 6px 18px rgba(1,71,90,.10), 0 22px 50px rgba(1,71,90,.12);

  /* Larghezze */
  --w-contenuto: 1180px;
  --w-stretto:   760px;

  --transizione: 220ms cubic-bezier(.2,.7,.3,1);
}

/* --- 2. Reset ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--t-base);
  line-height: 1.68;
  color: var(--testo);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--inchiostro);
  line-height: 1.16;
  letter-spacing: -0.005em;
  margin: 0 0 var(--s-4);
}
h1 { font-weight: 400; }

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--petrolio); text-decoration-color: rgba(1,103,128,.32); text-underline-offset: 3px; }
a:hover { color: var(--turchese-testo); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.3em; }
li { margin-bottom: .4em; }

strong { font-weight: 600; color: var(--inchiostro); }

:focus-visible {
  outline: 3px solid var(--turchese-testo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- 3. Layout ---------------------------------------------------------- */

.contenitore {
  width: 100%;
  max-width: var(--w-contenuto);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.contenitore--stretto { max-width: var(--w-stretto); }

.sezione { padding-block: var(--s-9); }
.sezione--compatta { padding-block: var(--s-7); }
.sezione--ampia { padding-block: var(--s-10); }
.sezione--sabbia { background: var(--sabbia); }
.sezione--acqua { background: var(--acqua-chiara); }
.sezione--scura { background: var(--petrolio); color: rgba(255,255,255,.88); }
.sezione--scura h1, .sezione--scura h2, .sezione--scura h3 { color: #fff; }

.griglia { display: grid; gap: var(--s-5); }
.griglia--2 { grid-template-columns: repeat(2, 1fr); }
.griglia--3 { grid-template-columns: repeat(3, 1fr); }
.griglia--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .griglia--3, .griglia--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .griglia--2, .griglia--3, .griglia--4 { grid-template-columns: 1fr; }
}

.pila > * + * { margin-top: var(--s-4); }
.centra { text-align: center; }
.centra .occhiello { justify-content: center; }

/* --- 4. Elementi tipografici ------------------------------------------- */

.occhiello {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-testo);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--turchese-testo);
  margin-bottom: var(--s-3);
}
.occhiello::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--turchese);
  border-radius: 2px;
}
.sezione--scura .occhiello { color: var(--acqua); }
.sezione--scura .occhiello::before { background: var(--acqua); }

.guida {
  font-size: var(--t-md);
  color: var(--tenue);
  max-width: 62ch;
  line-height: 1.62;
}
.centra .guida { margin-inline: auto; }
.sezione--scura .guida { color: rgba(255,255,255,.78); }

.intestazione-sezione { max-width: 68ch; margin-bottom: var(--s-7); }
.centra .intestazione-sezione { margin-inline: auto; }

/* --- 5. Bottoni --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: .9em 1.6em;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transizione);
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--primario {
  background: var(--petrolio);
  color: #fff;
  box-shadow: 0 2px 10px rgba(1,103,128,.22);
}
.btn--primario:hover {
  background: var(--petrolio-scuro);
  color: #fff;
  box-shadow: 0 6px 18px rgba(1,103,128,.28);
}
.btn--accento { background: var(--turchese); color: #04343A; }
.btn--accento:hover { background: var(--turchese-scuro); color: #fff; }

.btn--scuro { background: var(--inchiostro); color: #fff; }
.btn--scuro:hover { background: #000; color: #fff; }

.btn--contorno {
  border-color: rgba(1,103,128,.30);
  color: var(--petrolio);
  background: transparent;
}
.btn--contorno:hover { border-color: var(--petrolio); background: var(--petrolio); color: #fff; }

.btn--chiaro { background: #fff; color: var(--petrolio); }
.btn--chiaro:hover { background: var(--acqua-chiara); color: var(--petrolio-scuro); }

.btn--fantasma { color: #fff; border-color: rgba(255,255,255,.42); }
.btn--fantasma:hover { background: #fff; color: var(--petrolio); }

.btn--whatsapp { background: #1EA855; color: #fff; }
.btn--whatsapp:hover { background: #17853F; color: #fff; }

.btn--grande { padding: 1.1em 2.1em; font-size: var(--t-base); }
.btn--pieno { width: 100%; }

.gruppo-btn { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.centra .gruppo-btn { justify-content: center; }

.link-freccia {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--petrolio);
}
.link-freccia::after { content: "→"; transition: transform var(--transizione); }
.link-freccia:hover::after { transform: translateX(5px); }

/* --- 6. Barra di servizio + navigazione -------------------------------- */

.barra-servizio {
  background: var(--petrolio-scuro);
  color: rgba(255,255,255,.82);
  font-size: var(--t-xs);
}
.barra-servizio .contenitore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 40px;
  flex-wrap: wrap;
}
.barra-servizio a { color: #fff; text-decoration: none; }
.barra-servizio a:hover { color: var(--acqua); }
.barra-servizio__voci { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; }
.barra-servizio__voce { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.barra-servizio svg { width: 14px; height: 14px; flex: none; opacity: .8; }
@media (max-width: 620px) {
  .barra-servizio { font-size: 11px; }
  .barra-servizio .contenitore { justify-content: center; min-height: 34px; }
  .barra-servizio__voci:first-child { display: none; }
}
@media (max-width: 760px) { .barra-servizio__stato { display: none; } }

.testata {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow var(--transizione);
}
.testata.is-scrollata { box-shadow: var(--om-2); }

.testata .contenitore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 86px;
}

.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo img {
  height: 56px;
  width: auto;
  display: block;
}
@media (max-width: 620px) { .logo img { height: 42px; } }

.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav__voce { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .65rem .85rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--testo);
  text-decoration: none;
  transition: var(--transizione);
  white-space: nowrap;
}
.nav__link:hover, .nav__voce:focus-within > .nav__link { background: var(--sabbia-scura); color: var(--petrolio); }
.nav__link[aria-current="page"] { color: var(--petrolio); font-weight: 600; }
.nav__link .caret { width: .55em; height: .55em; opacity: .55; transition: transform var(--transizione); }
.nav__voce:hover .caret { transform: rotate(180deg); }

.sottomenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 268px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--om-3);
  padding: var(--s-3);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--transizione);
}
.nav__voce:hover .sottomenu,
.nav__voce:focus-within .sottomenu { opacity: 1; visibility: visible; transform: translateY(0); }
.sottomenu li { margin: 0; }
.sottomenu a {
  display: block;
  padding: .58rem .7rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--testo);
  text-decoration: none;
  transition: var(--transizione);
}
.sottomenu a:hover { background: var(--acqua-chiara); color: var(--petrolio); }
.sottomenu__titolo {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tenue);
  padding: .5rem .7rem .3rem;
}

.azioni-testata { display: flex; align-items: center; gap: var(--s-3); flex: none; }

/* Blocco di azioni in fondo al menu mobile (nascosto su desktop). */
.nav__coda { display: none; }

.hamburger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: #fff;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--petrolio);
  border-radius: 2px;
  position: relative;
  transition: var(--transizione);
}
.hamburger span::before, .hamburger span::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; background: var(--petrolio); border-radius: 2px;
  transition: var(--transizione);
}
.hamburger span::before { top: -6px; }
.hamburger span::after  { top: 6px; }
.hamburger[aria-expanded="true"] span { background: transparent; }
.hamburger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .hamburger { display: grid; }
  /* backdrop-filter creerebbe un blocco contenitore per il pannello fisso
     del menu: su mobile va rimosso, altrimenti il menu non copre lo schermo. */
  .testata {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(400px, 88vw);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 100px var(--s-5) var(--s-7);
    overflow-y: auto;
    box-shadow: var(--om-3);
    z-index: 1;
    /* Chiuso: fuori dal flusso, così non genera scorrimento orizzontale. */
    display: none;
  }
  .nav.is-aperto { display: flex; animation: entra-nav 260ms cubic-bezier(.2,.7,.3,1); }
  @keyframes entra-nav {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }
  /* Logo e pulsanti restano cliccabili sopra il pannello del menu. */
  .testata .logo, .azioni-testata { position: relative; z-index: 2; }
  .nav__voce { width: 100%; }
  .nav__link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: .95rem .3rem;
    font-size: var(--t-md);
    border-bottom: 1px solid var(--linea);
    border-radius: 0;
  }
  .sottomenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding: 0 0 var(--s-3) var(--s-4);
    display: none;
  }
  .nav__voce.is-aperto .sottomenu { display: block; }
  .azioni-testata .btn--contorno { display: none; }
  .nav__coda { display: grid; gap: .6rem; margin-top: auto; padding-top: var(--s-6); }
}

@media (max-width: 620px) {
  .testata .contenitore { min-height: 66px; }
  .azioni-testata .btn--primario { display: none; }
  .logo__segno { width: 36px; height: 36px; border-radius: 10px; }
  .logo__nome { font-size: 1.24rem; }
}

.velo {
  position: fixed; inset: 0;
  background: rgba(22,38,43,.42);
  opacity: 0; visibility: hidden;
  transition: var(--transizione);
  z-index: 98;
}
.velo.is-attivo { opacity: 1; visibility: visible; }

/* --- 7. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  background: linear-gradient(170deg, #FFFFFF 0%, var(--acqua-chiara) 100%);
  overflow: hidden;
  padding-block: var(--s-9) var(--s-9);
}
.hero::after {
  content: "";
  position: absolute;
  top: -18%; right: -12%;
  width: 46vw; height: 46vw;
  max-width: 640px; max-height: 640px;
  background: radial-gradient(circle, rgba(0,172,186,.20) 0%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}
.hero .contenitore { position: relative; z-index: 1; }
.hero__griglia {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--s-8);
  align-items: center;
}
@media (max-width: 940px) { .hero__griglia { grid-template-columns: 1fr; gap: var(--s-6); } }

.hero__titolo { margin-bottom: var(--s-5); }
.hero__titolo em { font-style: italic; color: var(--petrolio); }
.hero__testo { font-size: var(--t-md); color: var(--testo); max-width: 54ch; margin-bottom: var(--s-6); }

.hero__prove {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(15,76,92,.14);
}
.prova { display: flex; align-items: center; gap: .6rem; font-size: var(--t-sm); color: var(--testo); }
.prova svg { width: 20px; height: 20px; color: var(--acqua); flex: none; }

.hero__media { position: relative; }
.hero__media img, .hero__media .segnaposto, .hero__media .foto {
  border-radius: var(--r-lg);
  box-shadow: var(--om-3);
  width: 100%;
  overflow: hidden;
}
.hero__media .foto img { border-radius: var(--r-lg); }

.pillola-hero {
  position: absolute;
  left: -22px; bottom: 34px;
  background: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--om-3);
  display: flex; align-items: center; gap: var(--s-3);
  max-width: 262px;
}
.pillola-hero__icona {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: var(--acqua-chiara); color: var(--petrolio);
  display: grid; place-items: center;
}
.pillola-hero__icona svg { width: 21px; height: 21px; }
.pillola-hero strong { display: block; font-size: var(--t-sm); }
.pillola-hero span { font-size: var(--t-xs); color: var(--tenue); }
@media (max-width: 560px) { .pillola-hero { display: none; } }

/* --- 8. Fotografie e segnaposto ---------------------------------------- */

.foto { display: block; }
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--sabbia-scura);
}
.foto--piena img { border-radius: 0; }
.foto--riquadro img { box-shadow: var(--om-2); }


.segnaposto {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-5);
  background:
    repeating-linear-gradient(45deg, var(--sabbia-scura) 0 12px, var(--sabbia) 12px 24px);
  border: 2px dashed rgba(15,76,92,.24);
  color: var(--petrolio);
  border-radius: var(--r-lg);
  min-height: 200px;
}
.segnaposto__etichetta {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .78;
}
.segnaposto__nota { font-size: var(--t-xs); color: var(--tenue); margin-top: .35rem; max-width: 30ch; }
.segnaposto svg { width: 34px; height: 34px; opacity: .35; margin-bottom: .6rem; }

/* --- 9. Card ------------------------------------------------------------ */

.card {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: var(--transizione);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card:hover { box-shadow: var(--om-2); border-color: var(--turchese); }
.card h3 { margin-bottom: var(--s-2); font-size: var(--t-md); }
.card p { color: var(--tenue); font-size: var(--t-sm); flex: 1; }
.card .link-freccia { margin-top: var(--s-4); }
a.card { text-decoration: none; color: inherit; }

.card__icona {
  width: 54px; height: 54px;
  border-radius: 16px;
  background: var(--acqua-chiara);
  color: var(--petrolio);
  display: grid; place-items: center;
  margin-bottom: var(--s-4);
  flex: none;
  transition: var(--transizione);
}
.card__icona svg { width: 26px; height: 26px; }
.card:hover .card__icona { background: var(--petrolio); color: #fff; }

/* Card zona del corpo */
.card-zona {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  text-decoration: none;
  color: var(--inchiostro);
  font-weight: 600;
  font-size: var(--t-sm);
  transition: var(--transizione);
}
.card-zona:hover {
  border-color: var(--petrolio);
  background: var(--petrolio);
  color: #fff;
  box-shadow: var(--om-2);
}
.card-zona svg { width: 30px; height: 30px; color: var(--petrolio-chiaro); flex: none; transition: var(--transizione); }
.card-zona:hover svg { color: var(--acqua); }
.card-zona small { display: block; font-weight: 400; color: var(--tenue); font-size: var(--t-xs); margin-top: .1rem; }
.card-zona:hover small { color: rgba(255,255,255,.72); }

/* --- 10. Passi / percorso ---------------------------------------------- */

.passi { counter-reset: passo; display: grid; gap: var(--s-5); }
.passo {
  position: relative;
  padding-left: 4.6rem;
}
.passo::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute; left: 0; top: 0;
  width: 3.1rem; height: 3.1rem;
  border-radius: 50%;
  background: var(--bianco);
  border: 1.5px solid var(--turchese);
  color: var(--petrolio);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}
.passo h3 { font-size: var(--t-md); margin-bottom: var(--s-1); }
.passo p { color: var(--tenue); font-size: var(--t-sm); }
.sezione--scura .passo::before { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.sezione--scura .passo p { color: rgba(255,255,255,.76); }

/* --- 11. Elenco con spunte --------------------------------------------- */

.elenco-spunte { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.elenco-spunte li {
  position: relative;
  padding-left: 2rem;
  margin: 0;
  font-size: var(--t-sm);
}
.elenco-spunte li::before {
  content: "";
  position: absolute; left: 0; top: .34em;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: var(--acqua-chiara);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23016780' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: .8rem; background-position: center; background-repeat: no-repeat;
}
.sezione--scura .elenco-spunte li::before { background-color: rgba(255,255,255,.16); }

/* --- 12. Riquadri informativi ------------------------------------------ */

.riquadro {
  border-radius: var(--r-lg);
  padding: var(--s-6);
  background: var(--sabbia);
  border: 1px solid var(--linea);
}
.riquadro--nota { background: var(--acqua-chiara); border-color: rgba(127,169,155,.42); }
.riquadro--avviso { background: #FDF6EC; border-color: #F0DCC0; }
.riquadro h3 { font-size: var(--t-md); }
.riquadro p { font-size: var(--t-sm); }

.dato { text-align: center; padding: var(--s-4); }
.dato__cifra {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--petrolio);
  line-height: 1;
  display: block;
  margin-bottom: var(--s-2);
}
.dato__etichetta { font-size: var(--t-sm); color: var(--tenue); }
.sezione--scura .dato__cifra { color: #fff; }
.sezione--scura .dato__etichetta { color: rgba(255,255,255,.72); }

/* --- 13. Scheda terapia (pagina interna) ------------------------------- */

.intestazione-pagina {
  background: linear-gradient(170deg, #FFFFFF 0%, var(--acqua-chiara) 100%);
  padding-block: var(--s-7) var(--s-8);
  border-bottom: 1px solid var(--linea);
}
.briciole {
  font-size: var(--t-xs);
  color: var(--tenue);
  margin-bottom: var(--s-4);
  display: flex; flex-wrap: wrap; gap: .45rem;
  align-items: center;
}
.briciole a { color: var(--tenue); text-decoration: none; }
.briciole a:hover { color: var(--petrolio); text-decoration: underline; }
.briciole span[aria-hidden] { opacity: .5; }

.layout-articolo {
  display: grid;
  grid-template-columns: minmax(0,1fr) 330px;
  gap: var(--s-8);
  align-items: start;
}
@media (max-width: 980px) { .layout-articolo { grid-template-columns: 1fr; } }

.corpo-testo { font-size: var(--t-base); }
.corpo-testo h2 { font-size: var(--t-xl); margin-top: var(--s-7); }
.corpo-testo h2:first-child { margin-top: 0; }
.corpo-testo h3 { font-size: var(--t-md); margin-top: var(--s-5); }
.corpo-testo > *:first-child { margin-top: 0; }
.corpo-testo .occhiello { margin-top: 0; }

.pannello-laterale {
  position: sticky;
  top: 110px;
  display: grid;
  gap: var(--s-4);
}
.pannello {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--om-1);
}
.pannello--evidenza { background: var(--petrolio); color: rgba(255,255,255,.86); border-color: var(--petrolio); }
.pannello--evidenza h3 { color: #fff; }
.pannello h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.pannello dl { margin: 0; display: grid; gap: var(--s-3); }
.pannello dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); font-weight: 600; }
.pannello dd { margin: .15rem 0 0; font-size: var(--t-sm); color: var(--inchiostro); font-weight: 500; }
.pannello--evidenza dt { color: var(--acqua); }
.pannello--evidenza dd { color: #fff; }

/* --- 14. Accordion / FAQ ------------------------------------------------ */

.faq { display: grid; gap: var(--s-3); }
.faq__voce {
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
  transition: var(--transizione);
}
.faq__voce[open] { border-color: var(--turchese); box-shadow: var(--om-1); }
.faq__voce summary {
  cursor: pointer;
  padding: var(--s-4) var(--s-5);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--inchiostro);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  list-style: none;
}
.faq__voce summary::-webkit-details-marker { display: none; }
.faq__voce summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--petrolio);
  line-height: 1;
  flex: none;
  transition: transform var(--transizione);
}
.faq__voce[open] summary::after { transform: rotate(45deg); }
.faq__voce .faq__risposta { padding: 0 var(--s-5) var(--s-5); font-size: var(--t-sm); color: var(--testo); }

/* --- 15. Recensioni ----------------------------------------------------- */

.recensione {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  height: 100%;
}
.stelle { display: flex; gap: 2px; color: #E2A33C; }
.stelle svg { width: 17px; height: 17px; }
.recensione blockquote {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.68;
  color: var(--testo);
  flex: 1;
}
.recensione footer { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-xs); color: var(--tenue); }
.recensione__iniziale {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--acqua-chiara); color: var(--petrolio);
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--t-sm);
  flex: none;
}
.recensione__nome { color: var(--inchiostro); font-weight: 600; font-size: var(--t-sm); display: block; }

/* --- 16. Team ----------------------------------------------------------- */

/* Le presentazioni hanno lunghezze diverse: la scheda diventa una colonna
   flessibile e la riga dell'albo scivola in fondo, così le cinque schede
   restano allineate fra loro. */
.membro { text-align: left; display: flex; flex-direction: column; }
.membro > p:not(.membro__ruolo):not(.membro__albo) { flex: 1 1 auto; }
.membro__foto, .membro .segnaposto, .membro .foto {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  object-fit: cover;
  width: 100%;
  margin-bottom: var(--s-4);
  min-height: 0;
}
.membro h3 { margin-bottom: var(--s-1); font-size: var(--t-md); }
.membro__ruolo { color: var(--petrolio-chiaro); font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--s-3); }
.membro__albo { font-size: var(--t-xs); color: var(--tenue); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--linea); }
.membro p { font-size: var(--t-sm); color: var(--tenue); }

/* --- 17. Listino -------------------------------------------------------- */

.tabella-prezzi { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabella-prezzi caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--inchiostro);
  padding-bottom: var(--s-3);
}
.tabella-prezzi th {
  text-align: left;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tenue);
  padding: var(--s-3) var(--s-4);
  border-bottom: 2px solid var(--linea);
}
.tabella-prezzi td { padding: var(--s-4); border-bottom: 1px solid var(--linea); }
.tabella-prezzi tr:hover td { background: var(--sabbia); }
.tabella-prezzi td:last-child { text-align: right; font-weight: 700; color: var(--petrolio); white-space: nowrap; }
.tabella-prezzi td small { display: block; color: var(--tenue); font-weight: 400; margin-top: .18rem; }
@media (max-width: 620px) {
  .tabella-prezzi th:nth-child(2), .tabella-prezzi td:nth-child(2) { display: none; }
}

/* --- 18. Moduli --------------------------------------------------------- */

.modulo { display: grid; gap: var(--s-4); }
.campo { display: grid; gap: .4rem; }
.campo label { font-size: var(--t-sm); font-weight: 600; color: var(--inchiostro); }
.campo label .obbligatorio { color: var(--turchese); }
.campo input, .campo select, .campo textarea {
  padding: .85rem 1rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: var(--t-sm);
  transition: var(--transizione);
  width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--petrolio);
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,76,92,.12);
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo__aiuto { font-size: var(--t-xs); color: var(--tenue); }
.modulo__riga { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 620px) { .modulo__riga { grid-template-columns: 1fr; } }

.consenso { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-xs); color: var(--tenue); }
.consenso input { width: 18px; height: 18px; margin-top: .18rem; flex: none; accent-color: var(--petrolio); }

.esito-modulo {
  padding: var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  display: none;
}
.esito-modulo.is-visibile { display: block; }
.esito-modulo--ok { background: #EAF6F0; color: var(--successo); border: 1px solid #BFE3D2; }
.esito-modulo--ko { background: #FDF0EC; color: var(--turchese-scuro); border: 1px solid #F3D2C7; }

/* --- 19. CTA finale ----------------------------------------------------- */

.richiamo {
  background: linear-gradient(135deg, var(--petrolio) 0%, var(--petrolio-scuro) 78%);
  color: rgba(255,255,255,.86);
  border-radius: var(--r-xl);
  padding: var(--s-8) var(--s-7);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.richiamo::before {
  content: "";
  position: absolute;
  top: -40%; left: -10%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(0,172,186,.28) 0%, transparent 70%);
  border-radius: 50%;
}
.richiamo > * { position: relative; }
.richiamo h2 { color: #fff; }
.richiamo p { color: rgba(255,255,255,.8); max-width: 56ch; margin-inline: auto; }
.richiamo .gruppo-btn { justify-content: center; margin-top: var(--s-6); }

/* --- 20. Footer --------------------------------------------------------- */

.pie {
  background: var(--inchiostro);
  color: rgba(255,255,255,.66);
  font-size: var(--t-sm);
  padding-block: var(--s-8) var(--s-5);
}
.pie a { color: rgba(255,255,255,.78); text-decoration: none; }
.pie a:hover { color: var(--acqua); }
.pie h4 {
  color: #fff;
  font-family: var(--font-testo);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  margin-bottom: var(--s-4);
}
.pie__griglia {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: var(--s-6);
  padding-bottom: var(--s-7);
}
@media (max-width: 900px) { .pie__griglia { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie__griglia { grid-template-columns: 1fr; } }
.pie__elenco { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.pie__elenco li { margin: 0; }
.pie .logo img { height: 54px; }
.pie__contatto { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: var(--s-3); }
.pie__contatto svg { width: 17px; height: 17px; color: var(--acqua); flex: none; margin-top: .25rem; }

.orari { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; font-size: var(--t-sm); }
.orari li { display: flex; justify-content: space-between; gap: var(--s-4); margin: 0; }
.orari .giorno { color: rgba(255,255,255,.66); }
.orari .ora { color: #fff; font-variant-numeric: tabular-nums; }

.pie__basso {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-xs);
  color: rgba(255,255,255,.5);
}
.pie__legale { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* --- 21. Barra mobile fissa -------------------------------------------- */

.barra-mobile {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  display: none;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linea);
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  gap: .6rem;
  box-shadow: 0 -4px 20px rgba(22,38,43,.09);
}
.barra-mobile .btn { flex: 1; padding: .8em 1em; font-size: var(--t-xs); }
@media (max-width: 760px) {
  .barra-mobile { display: flex; }
  body { padding-bottom: 76px; }
}

/* --- 22. Mappa ---------------------------------------------------------- */

.mappa {
  border: 0;
  width: 100%;
  min-height: 380px;
  border-radius: var(--r-lg);
  filter: saturate(.9) contrast(1.02);
}

/* --- 23. Blog ----------------------------------------------------------- */

.articolo-anteprima {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: var(--transizione);
  height: 100%;
}
.articolo-anteprima:hover { box-shadow: var(--om-2); border-color: var(--turchese); }
.articolo-anteprima .segnaposto { border-radius: 0; border: none; border-bottom: 1px solid var(--linea); min-height: 168px; }
.articolo-anteprima__corpo { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.articolo-anteprima__meta {
  font-size: var(--t-xs); color: var(--tenue);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  margin-bottom: var(--s-2);
}
.articolo-anteprima h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.articolo-anteprima p { font-size: var(--t-sm); color: var(--tenue); flex: 1; }

/* --- 24. Utilità -------------------------------------------------------- */

.salta-al-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--petrolio);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  z-index: 200;
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
}
.salta-al-contenuto:focus { left: 0; color: #fff; }

.solo-lettori-schermo {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.rivela { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.rivela.is-visibile { opacity: 1; transform: none; }

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

@media print {
  .testata, .barra-servizio, .barra-mobile, .pie, .richiamo { display: none !important; }
  body { padding-bottom: 0; }
}

/* --- 25. Illustrazioni delle zone del corpo ---------------------------- */

.illustrazione { width: 100%; height: auto; display: block; }

.intestazione-zona {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--s-8);
  align-items: center;
}
.intestazione-zona__figura {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--om-1);
}
@media (max-width: 820px) {
  .intestazione-zona { grid-template-columns: 1fr; gap: var(--s-6); }
  .intestazione-zona__figura { max-width: 190px; }
}

.card--zona { align-items: flex-start; }
.card__figura {
  display: block;
  width: 100%;
  background: var(--acqua-chiara);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-4);
  margin-bottom: var(--s-5);
}
.card__figura .illustrazione { max-width: 132px; margin-inline: auto; }
.card--zona:hover .card__figura { background: #DCF0F3; }

/* --- 26. Fascia fotografica in cima alle pagine terapia ---------------- */

.foto-testata {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s-6);
  box-shadow: var(--om-1);
}
.foto-testata img { border-radius: 0; }
.foto-didascalia {
  font-size: var(--t-xs);
  color: var(--tenue);
  margin-top: var(--s-2);
}

/* Campo trappola per i robot: invisibile agli utenti, non nascosto con
   display:none perché alcuni robot lo riconoscerebbero. */
.campo-trappola {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* --- 27. Immagini circolari e tessere delle zone del corpo ------------- */

.cerchio { display: block; }
.cerchio img { width: 100%; height: auto; border-radius: 50%; }

.tessera-zona {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: var(--s-4);
  text-decoration: none;
  color: inherit;
  transition: var(--transizione);
}
.tessera-zona:hover { border-color: var(--turchese); box-shadow: var(--om-2); color: inherit; }
.tessera-zona__foto { flex: none; width: 92px; }
.tessera-zona__testo strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--inchiostro);
  line-height: 1.2;
}
.tessera-zona__testo small { color: var(--tenue); font-size: var(--t-xs); line-height: 1.45; display: block; margin-top: .25rem; }
.tessera-zona:hover .tessera-zona__testo strong { color: var(--petrolio); }

.intestazione-zona__figura { background: transparent; border: 0; box-shadow: none; padding: 0; }
.card__figura { background: transparent; padding: 0 var(--s-5) 0; }
.card__figura .cerchio { max-width: 210px; margin-inline: auto; }

/* --- 28. Griglia a cinque colonne (pagina team) ------------------------ */

.griglia--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .griglia--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .griglia--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .griglia--5 { grid-template-columns: 1fr; } }


/* =========================================================================
   NUOVA DIREZIONE — approvata dal committente
   Struttura A (fondo petrolio scuro, due colonne, fotografia in evidenza)
   con tipografia C (titoli grandi e compatti, una parola in gradiente).
   Aggiunta il 13 agosto 2026. Sostituisce, per sovrascrittura, le regole
   corrispondenti scritte più sopra: non cancellare quelle, servono ancora
   alle pagine che non hanno ancora la nuova veste.
   ========================================================================= */

:root {
  --notte:     #012A36;   /* fondo istituzionale scuro */
  --notte-piu: #001E27;   /* barra di servizio e fasce di chiusura */
  --su-turchese: #04343A; /* testo leggibile dentro il pulsante turchese */
}

/* --- barra di servizio e testata: un unico blocco scuro ------------------ */
.barra-servizio { background: var(--notte-piu); color: rgba(255,255,255,.62); }
.barra-servizio__voce { color: rgba(255,255,255,.68); }
.barra-servizio__voce:hover { color: var(--acqua); }
.barra-servizio__stato { color: var(--acqua); }

.testata {
  background: rgba(1,42,54,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.testata.is-scrollata { box-shadow: 0 10px 34px rgba(0,0,0,.32); }
.testata .nav__link { color: rgba(255,255,255,.80); }
.testata .nav__link:hover,
.testata .nav__voce--attiva > .nav__link { color: var(--acqua); }
.testata .hamburger span,
.testata .hamburger span::before,
.testata .hamburger span::after { background: #fff; }

/* --- pulsanti: il primario diventa turchese pieno ------------------------ */
.btn--primario {
  background: var(--turchese);
  color: var(--su-turchese);
  border-color: var(--turchese);
  box-shadow: 0 8px 26px rgba(0,172,186,.30);
}
.btn--primario:hover {
  background: var(--acqua);
  border-color: var(--acqua);
  color: var(--su-turchese);
}
.testata .btn--contorno {
  border-color: rgba(255,255,255,.28);
  color: #fff;
  background: transparent;
}
.testata .btn--contorno:hover { border-color: var(--acqua); color: var(--acqua); }

/* --- eroe: fondo scuro, alone turchese, titolo compatto ------------------ */
.hero {
  background: var(--notte);
  color: rgba(255,255,255,.70);
  padding-block: clamp(3.5rem, 6vw, 6rem) clamp(4rem, 7vw, 7rem);
}
.hero::after {
  content: "";
  position: absolute;
  right: -10%;
  top: -34%;
  width: min(880px, 90vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,172,186,.22) 0%, transparent 66%);
  pointer-events: none;
  z-index: 0;
}
.hero .contenitore { position: relative; z-index: 1; }
.hero .occhiello { color: var(--acqua); }
.hero .occhiello::before { background: var(--turchese); }

.hero__titolo {
  font-size: clamp(2.7rem, 4.9vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.038em;
  font-weight: 600;
  color: #fff;
}
.hero__titolo em {
  font-style: normal;
  background: linear-gradient(100deg, #00ACBA, #7FE9F2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__testo { color: rgba(255,255,255,.68); font-size: var(--t-md); max-width: 46ch; }
.hero__prove {
  border-top: 1px solid rgba(255,255,255,.13);
  padding-top: var(--s-5);
  margin-top: var(--s-7);
}
.hero__prove .prova { color: rgba(255,255,255,.56); }
.hero__prove .prova svg { color: var(--turchese); }
.hero .btn--contorno { border-color: rgba(255,255,255,.26); color: #fff; }
.hero .btn--contorno:hover { border-color: var(--acqua); color: var(--acqua); background: transparent; }
.hero__media img { border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0,0,0,.5); }

/* --- titoli di sezione più grandi e più stretti -------------------------- */
.sezione h2,
.intestazione-sezione h2 {
  font-size: var(--t-3xl);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 600;
}
.intestazione-sezione .guida { font-size: var(--t-md); }

/* --- ritmo: le fasce scure diventano davvero scure ----------------------- */
.sezione--scura { background: var(--notte); color: rgba(255,255,255,.70); }
.sezione--scura .occhiello { color: var(--acqua); }
.sezione--scura .occhiello::before { background: var(--turchese); }
.sezione--scura .guida { color: rgba(255,255,255,.62); }
.sezione--scura .passo h3 { color: #fff; }
.sezione--scura .passo p { color: rgba(255,255,255,.62); }

/* =========================================================================
   MAPPA DEL CORPO
   La domanda «dove le fa male?» ha una risposta visiva: la si indica.
   Le articolazioni sono i punti da toccare — è anche il modo in cui un
   fisioterapista guarda il corpo.
   ========================================================================= */

.sezione--mappa { background: linear-gradient(180deg, #fff 0%, var(--acqua-chiara) 100%); }

.mappa-blocco {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-top: var(--s-7);
}
.mappa-figura { display: grid; place-items: center; align-content: center; }
.mappa-corpo { width: min(400px, 100%); height: auto; overflow: visible; }

.mc-corpo-seg { stroke: #C3DFE6; stroke-linecap: round; }
.mc-corpo-forma { fill: #C3DFE6; stroke: #C3DFE6; stroke-linejoin: round; stroke-linecap: round; }

.mc-alone { fill: rgba(0,172,186,0); pointer-events: all; transition: fill var(--transizione); }
.mc-punto {
  fill: #fff;
  stroke: var(--petrolio);
  stroke-width: 2.5;
  pointer-events: none;
  transition: fill var(--transizione), stroke var(--transizione);
}
.mc-zona { cursor: pointer; }
.mc-zona:focus { outline: none; }

/* il rosso compare solo qui, ed è il segnale del dolore: un corallo caldo,
   non un rosso d'allarme. Il colore non lavora mai da solo — insieme al
   punto acceso si apre il pannello con il nome della zona. */
.mc-zona:hover .mc-alone,
.mc-zona:focus-visible .mc-alone { fill: rgba(224,83,61,.16); }
.mc-zona:hover .mc-punto,
.mc-zona:focus-visible .mc-punto { stroke: #E0533D; }
.mc-zona.is-scelta .mc-punto { fill: #E0533D; stroke: #B23A26; }
.mc-zona.is-scelta .mc-alone { fill: rgba(224,83,61,.22); }

@keyframes mc-respiro {
  0%, 100% { stroke-opacity: .5; }
  50%      { stroke-opacity: 1; }
}
.mc-punto { animation: mc-respiro 3.4s ease-in-out infinite; }
.mc-zona:nth-of-type(2) .mc-punto { animation-delay: .3s; }
.mc-zona:nth-of-type(3) .mc-punto { animation-delay: .6s; }
.mc-zona:nth-of-type(4) .mc-punto { animation-delay: .9s; }
.mc-zona:nth-of-type(5) .mc-punto { animation-delay: 1.2s; }
.mc-zona:nth-of-type(6) .mc-punto { animation-delay: 1.5s; }
.mc-zona:nth-of-type(7) .mc-punto { animation-delay: 1.8s; }
.mc-zona:nth-of-type(8) .mc-punto { animation-delay: 2.1s; }
.mc-zona:hover .mc-punto,
.mc-zona.is-scelta .mc-punto { animation: none; stroke-opacity: 1; }

/* --- didascalia sopra la figura --- */
.mc-didascalia {
  min-height: 7.5rem;
  margin-bottom: var(--s-4);
  text-align: center;
  max-width: 34rem;
}
.mc-didascalia__titolo {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--inchiostro);
  margin: 0 0 var(--s-2);
  transition: color var(--transizione);
}
.mc-didascalia__testo { font-size: var(--t-sm); color: var(--tenue); margin: 0; }
.mc-didascalia.is-attiva .mc-didascalia__titolo { color: var(--petrolio-scuro); }

/* le nove schede con le fotografie, sotto la figura */
.mappa-blocco .griglia-zone {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: 0;
}
/* la scheda si accende quando si indica il punto corrispondente sulla figura,
   e viceversa: sono due modi di dire la stessa cosa */
.tessera-zona.is-attiva {
  border-color: var(--turchese);
  box-shadow: 0 10px 30px rgba(1,71,90,.13);
  transform: translateY(-2px);
}
.tessera-zona.is-attiva strong { color: var(--petrolio-scuro); }
.tessera-zona--altro {
  background: linear-gradient(135deg, rgba(0,172,186,.10), rgba(0,172,186,.03));
  border-color: rgba(0,172,186,.45);
  border-style: dashed;
}
.tessera-zona--altro:hover { border-style: solid; background: rgba(0,172,186,.13); }
.tessera-zona--altro strong { color: var(--petrolio-scuro); }

@media (prefers-reduced-motion: reduce) {
  .mc-punto { animation: none; stroke-opacity: 1; }
}

/* =========================================================================
   REVISIONE DI POSIZIONAMENTO — 15 agosto 2026
   «Una fisioterapia completa. Un metodo sviluppato qui.»
   Nessun effetto futuristico: gli stessi colori, più aria, gerarchia più
   chiara. L'innovazione la raccontano i contenuti, non la grafica.
   ========================================================================= */

.hero__nota {
  font-size: var(--t-sm);
  color: var(--acqua);
  border-left: 2px solid rgba(0,172,186,.5);
  padding-left: var(--s-4);
  margin: 0 0 var(--s-6);
}

/* --- quattro elementi distintivi --- */
.tessera-valore {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5);
}
.tessera-valore__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--turchese-testo);
  margin-bottom: var(--s-4);
}
.tessera-valore h3 { font-size: var(--t-lg); margin: 0 0 var(--s-3); color: var(--inchiostro); }
.tessera-valore p { font-size: var(--t-sm); color: var(--tenue); margin: 0; }

/* --- tre livelli di intervento --- */
.livelli { margin-top: var(--s-7); }
.livello {
  display: block;
  padding: var(--s-6);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.04);
  text-decoration: none;
  transition: border-color var(--transizione), background var(--transizione), transform var(--transizione);
}
.livello:hover {
  border-color: var(--turchese);
  background: rgba(0,172,186,.10);
  transform: translateY(-3px);
}
.livello__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--acqua);
  margin-bottom: var(--s-4);
}
.livello h3 { color: #fff; font-size: var(--t-xl); margin: 0 0 var(--s-3); }
.livello__claim { color: var(--acqua); font-weight: 500; margin-bottom: var(--s-3); }
.livello p { color: rgba(255,255,255,.66); font-size: var(--t-sm); }
.livello .link-freccia { margin-top: var(--s-5); color: var(--turchese); }

/* --- fascia Sistema Policettivo --- */
.sezione--policettivo {
  background:
    radial-gradient(1000px 520px at 85% 15%, rgba(0,172,186,.10), transparent 62%),
    var(--sabbia);
}
.policettivo-media { display: grid; gap: var(--s-4); }
.policettivo-media img { border-radius: var(--r-lg); }
.cuscini {
  margin: 0;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-5) var(--s-4);
}
.cuscini img { width: 100%; height: auto; border-radius: 0; }
.cuscini figcaption {
  font-size: var(--t-xs);
  color: var(--tenue);
  text-align: center;
  margin-top: var(--s-3);
}

/* --- citazione sobria: una frase che vale, senza virgolettoni --- */
.citazione-sobria {
  border-left: 2px solid var(--turchese);
  padding-left: var(--s-5);
  font-style: normal;
}
.sezione--scura .citazione-sobria { border-left-color: var(--acqua); color: rgba(255,255,255,.78); }
.nota-piccola { font-size: var(--t-xs); color: var(--tenue); margin-top: var(--s-3); }
.sezione--scura .nota-piccola { color: rgba(255,255,255,.45); }

/* --- collegamento esterno nel menu --- */
.nav__link--esterno { color: var(--acqua) !important; }
.nav__link--esterno::after { content: " ↗"; font-size: .85em; }

@media (max-width: 1080px) {
  .griglia--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .griglia--4 { grid-template-columns: 1fr; }
}

/* La testata ha due voci in più: si stringe la navigazione e, sotto una certa
   larghezza, il numero di telefono resta solo nella barra di servizio. */
@media (min-width: 1081px) {
  .nav { gap: .95rem; }
  .nav__link { font-size: .9rem; }
}
@media (min-width: 1081px) and (max-width: 1200px) {
  .nav { gap: .7rem; }
  .nav__link { font-size: .84rem; }
}
/* il numero resta nella barra di servizio e nella barra mobile: nella
   testata occupa spazio che serve alla navigazione */
@media (min-width: 1081px) {
  .azioni-testata .btn--contorno { display: none; }
}

/* «Per professionisti» vive nella barra di servizio: presente ma discreto,
   e non ruba spazio alla navigazione dei pazienti. */
.barra-servizio__pro { color: var(--acqua) !important; font-weight: 600; }
.barra-servizio__pro:hover { color: #fff !important; }

/* =========================================================================
   PRESTAZIONI, PERCORSI E TARIFFE
   Il prezzo non è il protagonista: sta a destra del nome, in tono, senza
   badge né evidenziazioni. Il protagonista è che cosa comprende la voce.
   ========================================================================= */

.intestazione-pagina--ampia { padding-block: var(--s-9) var(--s-8); }

.elenco-prestazioni { gap: 1.6rem; align-items: start; }
.prestazione {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.prestazione__testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}
.prestazione__testa h3 { margin: 0; font-size: var(--t-lg); color: var(--inchiostro); }
.prestazione__prezzo {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--petrolio);
  white-space: nowrap;
}
.prestazione__prezzo--riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-sm);
  font-family: var(--font-testo);
  font-weight: 400;
  color: var(--tenue);
  border-top: 1px solid var(--linea);
  padding-top: var(--s-4);
  margin: var(--s-5) 0 var(--s-5);
  white-space: normal;
}
.prestazione__prezzo--riga b {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--petrolio);
  white-space: nowrap;
}
.prestazione__testo { color: var(--testo); font-size: var(--t-sm); margin: 0 0 var(--s-3); }
.prestazione__durata { font-size: var(--t-xs); color: var(--tenue); margin: 0 0 var(--s-4); }
.prestazione .btn { margin-top: var(--s-2); }

/* percorsi distintivi: stessa palette, più presenza */
.percorso-distintivo {
  background: #fff;
  border: 1px solid rgba(0,172,186,.34);
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  box-shadow: var(--om-2);
  height: 100%;
}
.percorso-distintivo h3 {
  font-size: var(--t-xl);
  margin: 0 0 var(--s-2);
  color: var(--inchiostro);
  letter-spacing: -.02em;
}
.percorso-distintivo__claim {
  color: var(--turchese-testo);
  font-weight: 500;
  margin-bottom: var(--s-4);
}
.percorso-distintivo p { font-size: var(--t-sm); color: var(--testo); }

/* tariffe delle apparecchiature: volutamente sobrie, in coda */
.tariffe-strumentali {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-7);
  margin-top: var(--s-6);
}
.tariffa-strumentale {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-base);
}
.tariffa-strumentale b { font-family: var(--font-display); font-weight: 600; color: var(--petrolio); }

@media (max-width: 760px) {
  .tariffe-strumentali { grid-template-columns: 1fr; }
}

/* --- livelli di trattamento e sezione avanzati --------------------------- */
.elenco-prestazioni--singola { max-width: 46rem; }
.etichetta-livello {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tenue);
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  padding: .3rem .8rem;
  margin-bottom: var(--s-4);
}
.etichetta-livello--avanzato { color: var(--petrolio); border-color: rgba(0,172,186,.5); background: rgba(0,172,186,.07); }

.sezione--avanzati { background: linear-gradient(180deg, var(--sabbia) 0%, #fff 100%); }
.prestazione--avanzata { border-color: rgba(0,172,186,.4); box-shadow: var(--om-2); }
.prestazione__marchio {
  display: block;
  font-family: var(--font-testo);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tenue);
  margin-top: .3rem;
}
.prestazione__claim { color: var(--turchese-testo); font-weight: 500; font-size: var(--t-sm); margin: 0 0 var(--s-3); }
.prestazione__nota { font-size: var(--t-xs); color: var(--tenue); line-height: 1.5; margin: var(--s-3) 0 var(--s-4); }

.percorso-distintivo--largo { max-width: 58rem; }

/* la fotografia del Policettivo in home va vista dalla testa ai piedi:
   verticale e contenuta, non a tutta colonna */
.policettivo-media { justify-items: center; }
.policettivo-media .cerchio { width: min(340px, 80%); margin-inline: auto; }
.policettivo-media .cerchio img { width: 100%; height: auto; }
.policettivo-media .cuscini { max-width: 420px; width: 100%; }

/* =========================================================================
   «DOVE HAI DOLORE?» — la ricerca nel linguaggio del paziente
   ========================================================================= */
.cerca-dolore { max-width: 44rem; margin-inline: auto; position: relative; }
.cerca-dolore__etichetta {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--inchiostro);
  margin-bottom: var(--s-3);
  text-align: center;
}
.sezione--scura .cerca-dolore__etichetta,
.hero .cerca-dolore__etichetta { color: #fff; }
.cerca-dolore__campo { position: relative; }
.cerca-dolore__campo input {
  width: 100%;
  font: inherit;
  font-size: var(--t-md);
  padding: 1rem 1.3rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  background: #fff;
  color: var(--inchiostro);
  box-shadow: var(--om-1);
}
.cerca-dolore__campo input:focus-visible {
  outline: none;
  border-color: var(--turchese);
  box-shadow: 0 0 0 4px rgba(0,172,186,.18);
}
.cerca-dolore__aiuto,
.cerca-dolore__nota { font-size: var(--t-xs); color: var(--tenue); text-align: center; margin: var(--s-3) 0 0; }
.cerca-dolore__nota { margin-top: var(--s-4); font-style: italic; }
.sezione--scura .cerca-dolore__aiuto,
.sezione--scura .cerca-dolore__nota { color: rgba(255,255,255,.5); }

.cerca-dolore__esiti {
  margin-top: var(--s-4);
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--om-2);
  text-align: left;
}
.cerca-dolore__titolo {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--turchese-testo);
  margin: 0 0 var(--s-3);
}
.cerca-dolore__esito {
  display: block;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background var(--transizione);
}
.cerca-dolore__esito:hover { background: var(--acqua-chiara); }
.cerca-dolore__esito strong { display: block; color: var(--inchiostro); font-weight: 600; }
.cerca-dolore__esito small { display: block; font-size: var(--t-xs); color: var(--tenue); }
.cerca-dolore__vuoto { margin: 0; font-size: var(--t-sm); color: var(--testo); }

/* ===========================================================================
   PAGINA PRESTAZIONI E PREZZI — impianto a card del 16 agosto 2026
   Listino a tre colonne confrontabili con elenco di spunte, sul modello dei
   listini di licenza software. Tutte le sezioni della pagina usano lo stesso
   trattamento a card, così la lettura resta coerente dall'alto in basso.
   Progettata prima per il telefono: ogni griglia parte a una colonna.
   =========================================================================== */

/* --- il listino a tre colonne -------------------------------------------- */
.listino {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 940px) {
  .listino { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
}

.piano {
  position: relative;
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  box-shadow: var(--om-1);
}
.piano__label {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turchese-testo);
  background: var(--acqua-chiara);
  border-radius: var(--r-full);
  padding: .4em 1.1em;
  margin-bottom: 1rem;
}
.piano__titolo {
  font-size: var(--t-md);
  line-height: 1.25;
  margin: 0 0 .8rem;
  min-height: 2.5em;
}
.piano__prezzo {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.2vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--petrolio);
  line-height: 1;
  margin: 0;
}
.piano__periodo {
  font-size: var(--t-sm);
  color: var(--tenue);
  margin: .45rem 0 0;
  min-height: 1.4em;
}
.piano__testo {
  font-size: var(--t-sm);
  margin: 1.1rem 0 0;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--linea);
}
.piano__voci {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.4rem;
  display: grid;
  gap: .7rem;
  font-size: var(--t-sm);
}
.piano__voci li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: .55rem;
  align-items: start;
  line-height: 1.45;
}
.piano__voci svg { width: 1.05rem; height: 1.05rem; margin-top: .18em; color: var(--turchese); }
.piano__voci .tratto {
  display: block;
  width: 1.05rem;
  height: 2px;
  margin-top: .72em;
  background: var(--linea);
  border-radius: 2px;
}
.piano__voci .esclusa { color: var(--tenue); }
.piano__rilievo {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--petrolio-scuro);
  background: var(--acqua-chiara);
  border-radius: var(--r-md);
  padding: .9rem 1rem;
  margin: 0 0 1.2rem;
}
.piano__nota {
  font-size: var(--t-xs);
  color: var(--tenue);
  font-style: italic;
  margin: 1rem 0 0;
}
.piano > .btn { margin-top: auto; }

/* la colonna centrale è il centro visivo della pagina */
.piano--evidenza {
  border-color: var(--turchese);
  border-width: 2px;
  box-shadow: var(--om-3);
  padding-top: var(--s-7);
}
.piano--evidenza .piano__label { background: var(--turchese); color: #fff; }
.piano__fascetta {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--turchese);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  padding: .5em 1.4em;
  white-space: nowrap;
  box-shadow: var(--om-1);
}
@media (min-width: 940px) {
  .piano--evidenza { transform: translateY(-1.1rem); padding-bottom: var(--s-6); }
}

/* --- card di listino riusate da tutte le altre sezioni -------------------- */
.scheda-listino {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.scheda-listino:hover { border-color: var(--turchese); box-shadow: var(--om-2); }
.scheda-listino__testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
.scheda-listino h3 { font-size: var(--t-base); margin: 0; line-height: 1.3; }
.scheda-listino__prezzo {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--petrolio);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.scheda-listino__durata { font-size: var(--t-xs); color: var(--tenue); margin: 0; }
.scheda-listino p { font-size: var(--t-sm); margin: 0; }
.scheda-listino .btn,
.scheda-listino .link-freccia { margin-top: auto; align-self: flex-start; font-size: var(--t-sm); }
.scheda-listino .link-freccia { padding-top: .5rem; }

/* --- confronto terapia singola / seduta ---------------------------------- */
.confronto {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 820px) {
  .confronto { grid-template-columns: 1fr auto 1fr; gap: var(--s-4); }
}
.confronto__col {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.confronto__col--piena { border-color: var(--turchese); border-width: 2px; box-shadow: var(--om-2); }
.confronto__tipo {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: 0;
}
.confronto__col h3 { font-size: var(--t-md); margin: .35rem 0 .25rem; }
.confronto__prezzo {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--petrolio);
  letter-spacing: -.025em;
  margin: 0 0 1rem;
}
.confronto__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.confronto__col li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: .55rem;
  align-items: start;
  font-size: var(--t-sm);
  line-height: 1.45;
}
.confronto__col svg { width: 1.05rem; height: 1.05rem; margin-top: .18em; color: var(--turchese); }
.confronto__vs { display: flex; align-items: center; justify-content: center; }
.confronto__vs span {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tenue);
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  padding: .6em 1em;
}
.confronto__chiusura {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.35;
  color: var(--tenue);
  margin: var(--s-6) 0 0;
}
.confronto__chiusura b { color: var(--petrolio); font-weight: 600; }

/* --- vetrina Sistema Policettivo ----------------------------------------- */
.policettivo-vetrina {
  max-width: 58rem;
  margin: 0 auto;
  color: #fff;
  background:
    radial-gradient(760px 420px at 88% 8%, rgba(0,172,186,.30), transparent 60%),
    linear-gradient(160deg, var(--petrolio-scuro) 0%, #04343A 100%);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 4vw, 4rem);
  box-shadow: var(--om-3);
}
.policettivo-vetrina h2 { color: #fff; margin: .2rem 0 .6rem; }
.policettivo-vetrina p { color: rgba(255,255,255,.86); }
.policettivo-vetrina .occhiello { color: var(--acqua); }
.policettivo-vetrina .occhiello::before { background: var(--acqua); }
.policettivo-vetrina__claim {
  font-size: var(--t-md);
  color: var(--acqua) !important;
  margin-bottom: 1.1rem;
}
.policettivo-vetrina__prezzo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin: var(--s-5) 0;
}
.policettivo-vetrina__voce { font-weight: 600; color: #fff !important; margin: 0; }
.policettivo-vetrina__nota {
  font-size: var(--t-sm);
  margin: .25rem 0 0;
  color: rgba(255,255,255,.72) !important;
}
.policettivo-vetrina__prezzo b {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--acqua);
  line-height: 1;
}
.policettivo-vetrina__firma {
  font-size: var(--t-xs);
  font-style: italic;
  color: rgba(255,255,255,.62) !important;
  margin: var(--s-5) 0 0;
}

/* --- cosa è compreso ------------------------------------------------------ */
.valore {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.valore__icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: var(--r-md);
  background: var(--acqua-chiara);
  color: var(--turchese-testo);
  margin-bottom: .9rem;
}
.valore__icona svg { width: 1.4rem; height: 1.4rem; }
.valore h3 { font-size: var(--t-base); margin: 0 0 .35rem; }
.valore p { font-size: var(--t-sm); margin: 0; }

/* --- compattazione sul telefono ------------------------------------------
   Obiettivo del committente: nei primi scroll da smartphone devono comparire
   il prezzo di accesso, la seduta 58–63 € e il concetto che la tecnologia può
   essere compresa nella seduta.                                            */
@media (max-width: 700px) {
  .intestazione-pagina--ampia { padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .intestazione-pagina--ampia .guida { font-size: var(--t-base); }
  .intestazione-pagina--ampia .gruppo-btn { margin-top: 1.6rem !important; }

  #prestazioni .intestazione-sezione { margin-bottom: var(--s-5); }
  #prestazioni .intestazione-sezione .guida { font-size: var(--t-sm); }

  .listino { gap: var(--s-7); }
  .piano { padding: var(--s-5); }
  .piano__titolo { min-height: 0; }
  .piano__periodo { min-height: 0; }
}

/* ===========================================================================
   MENU DA TELEFONO — correzione del 16 agosto 2026
   Quando la testata è diventata scura (direzione grafica del 15 agosto) sono
   passate al bianco le tre linee dell'hamburger e le voci del menu, ma il
   pulsante e il pannello erano rimasti su fondo bianco. Risultato: un
   quadrato bianco vuoto al posto del pulsante e un pannello con le scritte
   invisibili, leggibili solo sfiorandole. Qui pulsante e pannello si
   allineano al fondo scuro. Vale per tutte le pagine del sito.
   =========================================================================== */

.testata .hamburger {
  background: transparent;
  border-color: rgba(255,255,255,.30);
}
.testata .hamburger:hover,
.testata .hamburger:focus-visible { background: rgba(255,255,255,.12); }

@media (max-width: 1080px) {
  .nav {
    background: linear-gradient(180deg, #012A36 0%, #04343A 100%);
    border-left: 1px solid rgba(255,255,255,.10);
  }
  /* le voci erano già bianche: qui si sistemano i separatori, che erano
     grigio chiaro e sul fondo scuro sparivano */
  .nav__link { border-bottom-color: rgba(255,255,255,.13); }
  .testata .sottomenu .nav__link { color: rgba(255,255,255,.66); }
  .testata .sottomenu .nav__link:hover { color: var(--acqua); }
  .nav__coda {
    border-top: 1px solid rgba(255,255,255,.13);
    margin-top: auto;
  }
}

/* ===========================================================================
   PAGINA PRENOTA — impianto del 16 agosto 2026
   Due riquadri per i due fisioterapisti e il calendario di Google caricato
   solo su richiesta, per non installare cookie di terze parti prima che il
   paziente lo chieda.
   =========================================================================== */

.scelta-fisio {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .scelta-fisio { grid-template-columns: repeat(2, 1fr); } }

.fisio {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  box-shadow: var(--om-1);
}
.fisio__stato {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tenue);
  background: var(--sabbia-scura);
  border-radius: var(--r-full);
  padding: .4em 1.1em;
  margin-bottom: .6rem;
}
.fisio__stato--vivo {
  color: #fff;
  background: var(--turchese);
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.fisio__stato--vivo::before {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: #fff;
  animation: pulsa-punto 2s ease-in-out infinite;
}
@keyframes pulsa-punto {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.75); }
}
@media (prefers-reduced-motion: reduce) {
  .fisio__stato--vivo::before { animation: none; }
}
.fisio h3 { font-size: var(--t-lg); margin: 0; }
.fisio__ruolo {
  font-size: var(--t-sm);
  color: var(--turchese-testo);
  font-weight: 500;
  margin: 0 0 .4rem;
}
.fisio p { font-size: var(--t-sm); margin: 0; }
.fisio__nota {
  font-size: var(--t-xs) !important;
  color: var(--tenue);
  background: var(--sabbia);
  border-radius: var(--r-md);
  padding: .85rem 1rem;
  margin: .5rem 0 1.2rem !important;
}
.fisio > .btn { margin-top: auto; }

/* --- il riquadro del calendario ------------------------------------------ */
.calendario-riquadro {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--om-2);
  background: var(--bianco);
}
.calendario-telaio {
  position: relative;
  width: 100%;
  min-height: 620px;
  background: var(--bianco);
}
.calendario-telaio.calendario--attivo { min-height: 720px; }
@media (max-width: 700px) {
  .calendario-telaio { min-height: 560px; }
  .calendario-telaio.calendario--attivo { min-height: 680px; }
}

.calendario-velo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .9rem;
  padding: var(--s-6) var(--s-5);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(0,172,186,.10), transparent 70%),
    var(--acqua-chiara);
}
.calendario-velo__icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem; height: 4.2rem;
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--turchese-testo);
  box-shadow: var(--om-1);
}
.calendario-velo h3 { font-size: var(--t-lg); margin: 0; }
.calendario-velo p {
  font-size: var(--t-sm);
  color: var(--testo);
  max-width: 34rem;
  margin: 0;
}
.calendario-velo .btn { margin-top: .6rem; }
.calendario-velo__alternativa {
  font-size: var(--t-xs) !important;
  color: var(--tenue) !important;
  margin-top: .4rem !important;
}

/* --- pagina Prenota: passi, prezzi e calendario più grande ---------------
   Richiesta del committente del 16 agosto: la schermata di prenotazione
   dev'essere leggibile anche da una persona anziana. Il contenuto del
   calendario è di Google e non si può ristilizzare da qui, quindi si lavora
   su tre leve: istruzioni numerate in chiaro, riquadro più largo e alto,
   e una via d'uscita a tutto schermo ben visibile.                        */

.passi-prenota {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-6);
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .passi-prenota { grid-template-columns: repeat(3, 1fr); } }
.passi-prenota li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.passi-prenota__n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--turchese);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
}
.passi-prenota strong { display: block; font-size: var(--t-md); margin-bottom: .2rem; }
.passi-prenota p { font-size: var(--t-sm); color: var(--tenue); margin: 0; }

.prezzi-prenota {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
}
.prezzi-prenota h3 { font-size: var(--t-md); margin: 0 0 .9rem; }
.prezzi-prenota__voci { display: grid; gap: .5rem; }
.prezzi-prenota__voci > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: .6rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-base);
}
.prezzi-prenota__voci > div:last-child { border-bottom: 0; }
.prezzi-prenota__voci b {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--petrolio);
  white-space: nowrap;
}
.prezzi-prenota__nota {
  font-size: var(--t-sm);
  color: var(--tenue);
  margin: 1rem 0 0;
}
@media (max-width: 560px) {
  .prezzi-prenota__voci > div { flex-direction: column; gap: .2rem; }
}

/* il riquadro del calendario diventa più alto: la pagina di Google ha
   bisogno di spazio verticale, altrimenti il paziente scorre dentro un
   riquadro dentro la pagina, che è la cosa più difficile da usare */
.calendario-telaio { min-height: 720px; }
.calendario-telaio.calendario--attivo { min-height: 860px; }
@media (max-width: 700px) {
  .calendario-telaio { min-height: 620px; }
  .calendario-telaio.calendario--attivo { min-height: 760px; }
}

.calendario-aiuto {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-size: var(--t-base);
  color: var(--tenue);
  margin: var(--s-5) 0 0;
  text-align: center;
}
.calendario-velo h3 { font-size: var(--t-xl); }
.calendario-velo .btn { font-size: var(--t-md); }
.calendario-velo__alternativa { font-size: var(--t-sm) !important; }