/* =========================================================================
   Dimensione Salute — Studio di Fisioterapia
   Foglio di stile unico. Ordine: font, token, reset, utility, componenti,
   sezioni, responsive, preferenze di sistema.
   ========================================================================= */

/* ── Font (self-hosted, nessuna richiesta esterna) ───────────────────────── */

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Karla';
  src: url('../assets/fonts/karla-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ── Token ───────────────────────────────────────────────────────────────── */

:root {
  /* palette, allineata al logo ufficiale: blu notte → petrolio → celeste */
  --petrolio:       #1F4F5C;
  --notte:          #0B2A45;
  --celeste:        #8CCBE6;
  --celeste-chiaro: #E2F0F6;
  --blu:            #042E53;
  --terracotta:     #C4805F;
  --nebbia:         #F2F5F6;
  --carta:          #FFFFFF;
  --inchiostro:     #1D2B35;

  /* varianti scure: le tinte piene non reggono il contrasto come testo */
  --celeste-testo:    #2B6682;
  --terracotta-testo: #8F4A2A;

  /* veli: fondi di card, testo scuro sopra */
  --celeste-velo:    #E7F2F8;
  --terracotta-velo: #F8EAE1;
  --blu-velo:        #E6EAF2;

  /* Tinta unita e non rgba con alpha: a 0.62 di opacità il testo secondario
     scendeva sotto la soglia AA. Così è 5.7:1 sul fondo, 6.2:1 sulla carta. */
  --tenue: #54636D;
  --filo:  rgba(31, 79, 92, 0.16);

  /* tipografia */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --testo:   'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-eroe:  clamp(2.5rem, 1.35rem + 4.7vw, 4.75rem);
  --t-h2:    clamp(1.85rem, 1.25rem + 2.5vw, 3rem);
  --t-h3:    clamp(1.12rem, 1.02rem + 0.45vw, 1.38rem);
  --t-guida: clamp(1.03rem, 0.99rem + 0.25vw, 1.19rem);

  /* struttura */
  --largo:   1180px;
  --lato:    clamp(1.25rem, 5vw, 3rem);
  --respiro: clamp(4.5rem, 9vw, 7.5rem);
  --raggio:  14px;

  /* binario del percorso (sezione Metodo) */
  --rail:  44px;
  --vuoto: clamp(1.25rem, 4vw, 3rem);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--notte);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-eroe); font-variation-settings: 'opsz' 130; }
h2 { font-size: var(--t-h2);   font-variation-settings: 'opsz' 100; }
h3 { font-size: var(--t-h3);   font-variation-settings: 'opsz' 32; font-weight: 600; line-height: 1.25; }

p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--petrolio);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--celeste); color: var(--notte); }

/* ── Utility ─────────────────────────────────────────────────────────────── */

.contenitore {
  width: 100%;
  max-width: var(--largo);
  margin-inline: auto;
  padding-inline: var(--lato);
}

.sezione { padding-block: var(--respiro); }

.sezione__intro { max-width: 42rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sezione__intro h2 { margin-bottom: 1rem; }

.occhiello {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--petrolio);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.occhiello::after {
  content: '';
  flex: 1;
  max-width: 4rem;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.guida {
  font-size: var(--t-guida);
  color: var(--tenue);
  max-width: 38rem;
  text-wrap: pretty;
}

/* elemento firma, ripreso dai post: la parola chiave su barra di colore.
   Il fondo è un gradiente e non un background pieno perché la casella
   inline di un titolo è molto più alta delle lettere: le percentuali
   ritagliano la barra sull'altezza reale del testo. */
.evidenzia {
  --tinta: rgba(140, 203, 230, 0.45);
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    transparent 20%, var(--tinta) 20%, var(--tinta) 93%, transparent 93%
  );
  color: inherit;
  padding: 0 0.14em;
  margin: 0 -0.05em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.evidenzia--chiara { --tinta: rgba(196, 128, 95, 0.34); }

.punto { opacity: 0.4; margin-inline: 0.5rem; }

.icona { width: 1.15em; height: 1.15em; flex: none; }

.salta {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--petrolio);
  color: var(--nebbia);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.18s ease;
}

.salta:focus { top: 0; }

/* Fotografie — vedi .eroe__visual e .persona__foto.
   Regola comune: mai min-height insieme ad aspect-ratio, perché la larghezza
   verrebbe derivata dall'altezza e su schermi stretti l'immagine sborderebbe.
   Gli attributi width e height nell'HTML riservano lo spazio prima del
   caricamento, così il testo non salta mentre la foto arriva. */

/* ── Bottoni ─────────────────────────────────────────────────────────────── */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-family: var(--testo);
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}

.bottone--pieno {
  background: var(--petrolio);
  border-color: var(--petrolio);
  color: var(--nebbia);
}

.bottone--pieno:hover { background: var(--notte); border-color: var(--notte); }

.bottone--linea {
  background: transparent;
  border-color: rgba(31, 79, 92, 0.35);
  color: var(--petrolio);
}

.bottone--linea:hover { border-color: var(--petrolio); background: rgba(31, 79, 92, 0.06); }

.bottone--piccolo { min-height: 40px; padding: 0.5rem 1.05rem; font-size: 0.88rem; }

.bottone:active { transform: translateY(1px); }

/* ── Testata ─────────────────────────────────────────────────────────────── */

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 245, 246, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: transform 0.28s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.testata--staccata { border-bottom-color: var(--filo); }

/* si ritrae scorrendo in basso, torna alla prima risalita */
.testata--ritratta { transform: translateY(-100%); }

.testata__interno {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--petrolio);
  margin-right: auto;
}

/* il monogramma è largo: 674×400, lo stesso rapporto qui */
.marchio__segno { width: 54px; height: 32px; flex: none; }

.marchio__testo { display: flex; flex-direction: column; line-height: 1.15; }

.marchio__testo strong {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'opsz' 30;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  color: var(--notte);
}

.marchio__testo span {
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tenue);
}

.navigazione { display: flex; gap: 1.75rem; }

.navigazione a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--inchiostro);
  padding-block: 0.3rem;
}

.navigazione a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--petrolio);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.navigazione a:hover::after,
.navigazione a[aria-current='true']::after { transform: scaleX(1); }

.navigazione a[aria-current='true'] { color: var(--petrolio); }

/* menu mobile: <details> nativo, funziona anche senza JavaScript */
.menu { display: none; position: relative; }

.menu summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--filo);
}

.menu summary::-webkit-details-marker { display: none; }

.menu__barre, .menu__barre::before, .menu__barre::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--petrolio);
  border-radius: 2px;
}

.menu__barre { position: relative; }
.menu__barre::before, .menu__barre::after { content: ''; position: absolute; left: 0; }
.menu__barre::before { top: -6px; }
.menu__barre::after  { top: 6px; }

.menu[open] .menu__barre { background: transparent; }
.menu[open] .menu__barre::before { top: 0; transform: rotate(45deg); }
.menu[open] .menu__barre::after  { top: 0; transform: rotate(-45deg); }

.menu__pannello {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  background: var(--carta);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  box-shadow: 0 18px 40px rgba(11, 42, 69, 0.14);
}

.menu__pannello a {
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
}

.menu__pannello a:hover { background: var(--celeste-velo); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.eroe { padding-block: clamp(3rem, 7vw, 6rem) var(--respiro); }

/* testo sopra, foto di gruppo sotto a tutta larghezza: è larga 16:9 e a
   fianco del testo i quattro volti verrebbero troppo piccoli */
.eroe__griglia {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.eroe__testo { max-width: 46rem; }

.eroe__testo h1 { margin-bottom: 1.5rem; }

.eroe__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

.eroe__nota {
  margin-top: 1.75rem;
  font-size: 0.92rem;
  color: var(--tenue);
}

/* prova sociale reale: il dato viene dalla scheda MioDottore e va tenuto
   aggiornato a mano */
.fiducia {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  font-size: 0.92rem;
  color: var(--inchiostro);
  text-decoration: none;
}
.fiducia strong { font-weight: 700; }
.fiducia:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
/* un filo più scura della terracotta: così le stelle arrivano a 3,5:1 */
.fiducia__stelle { color: #B8704E; letter-spacing: 0.08em; font-size: 1rem; }

.eroe__nota { margin-top: 0.9rem; }

.eroe__visual {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--raggio);
  background: var(--celeste-velo);
}

/* ── Servizi ─────────────────────────────────────────────────────────────── */

.servizi { background: var(--carta); border-block: 1px solid var(--filo); }

.servizi__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 1.5rem;
}

.carta {
  display: flex;
  flex-direction: column;
  padding: 2.25rem 1.85rem;
  border-radius: var(--raggio);
  border-top: 5px solid var(--celeste);
  background: var(--celeste-velo);
}

.carta h3 { margin-bottom: 0.7rem; }

/* in fondo alla carta, allineato fra le tre: chi ti segue e come chiedere */
.carta__piede {
  margin-top: auto;
  padding-top: 1.75rem;
}
.carta__chi {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(29, 43, 53, 0.12);
  font-size: 0.9rem;
  line-height: 1.35;
}
.carta__chi img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  flex: none;
}
/* due professionisti sulla stessa area: volti sovrapposti */
.carta__volti { display: flex; flex: none; }
.carta__volti img + img {
  margin-left: -12px;
  box-shadow: 0 0 0 2px var(--celeste-velo);
}
.carta__azione {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-top: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--petrolio);
  text-underline-offset: 4px;
}

.carta__taglio {
  font-family: var(--display);
  font-variation-settings: 'opsz' 40;
  font-size: 1.03rem;
  font-style: italic;
  color: var(--petrolio);
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.carta--celeste     { border-top-color: var(--celeste);     background: var(--celeste-velo); }
.carta--terracotta { border-top-color: var(--terracotta); background: var(--terracotta-velo); }
.carta--blu        { border-top-color: var(--blu); background: var(--blu-velo); }

.carta--terracotta .carta__taglio { color: var(--terracotta-testo); }
.carta--blu .carta__taglio        { color: var(--blu); }
.carta--celeste .carta__taglio     { color: var(--celeste-testo); }

.elenco { display: grid; gap: 0.65rem; font-size: 0.97rem; }

.elenco li { position: relative; padding-left: 1.4rem; }

.elenco li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.45;
}

/* ── Metodo — elemento firma ─────────────────────────────────────────────── */

.metodo { background: var(--nebbia); }

.percorso {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--vuoto);
  max-width: 46rem;
}

.percorso__binario {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--petrolio);
}

.percorso__auricolari { width: var(--rail); height: var(--rail); flex: none; }

.percorso__linea {
  flex: 1;
  width: 3px;
  min-height: 60px;
  background: rgba(31, 79, 92, 0.16);
  border-radius: 2px;
  overflow: hidden;
}

.percorso__riempimento {
  width: 100%;
  height: 100%;
  background: var(--petrolio);
  border-radius: 2px;
  transform-origin: top;
  transform: scaleY(var(--avanzamento, 1));
}

.percorso__campana { width: var(--rail); height: var(--rail); flex: none; margin-top: 2px; }

.percorso__passi {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: var(--rail); /* allinea il primo passo all'inizio della linea */
}

.passo { position: relative; }

.passo::before {
  content: '';
  position: absolute;
  top: 0.42em;
  left: calc(-1 * (var(--vuoto) + var(--rail) / 2) - 6.5px);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--nebbia);
  border: 3px solid var(--petrolio);
}

.passo h3 { margin-bottom: 0.5rem; }
.passo p  { color: var(--tenue); max-width: 34rem; text-wrap: pretty; }

/* ── Team ────────────────────────────────────────────────────────────────── */

.team { background: var(--carta); border-block: 1px solid var(--filo); }

/* quattro colonne raggruppate per area: i due fisioterapisti stanno sotto
   la stessa etichetta, ognuno largo quanto gli altri */
.team__aree {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.area--doppia { grid-column: span 2; }

.area__titolo {
  padding-top: 0.75rem;
  margin-bottom: 1.25rem;
  border-top: 4px solid var(--celeste);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--petrolio);
}
.area--terracotta .area__titolo { border-top-color: var(--terracotta); color: var(--terracotta-testo); }
.area--blu .area__titolo        { border-top-color: var(--blu); color: var(--blu); }

.area__persone { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.area--doppia .area__persone { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.persona__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raggio);
  background: var(--celeste-velo);
  margin-bottom: 1.35rem;
}
.persona h3 { margin-bottom: 0.25rem; }

.persona__ruolo {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--petrolio);
  margin-bottom: 0.7rem;
}

.persona__bio { font-size: 0.95rem; color: var(--tenue); }

/* ── Approfondimenti ─────────────────────────────────────────────────────── */

.approfondimenti { background: var(--nebbia); }

/* ── Reel di Instagram ────────────────────────────────────────────────────
   Gli embed hanno due vincoli scomodi, misurati sul campo:

   1. Sotto i ~326px di larghezza l'interfaccia di Instagram si rompe —
      l'avatar finisce sopra il nome e la barra dei like esce dal riquadro.
      Per questo le card hanno larghezza fissa e la fila scorre in
      orizzontale invece di stringersi in colonne.

   2. L'altezza necessaria non è un rapporto costante: l'area video scala
      con la larghezza (fattore 1,24) ma intestazione, barra dei like e
      campo commenti occupano circa 202px fissi. Misurato a 260, 326, 340,
      380 e 440px: la formula regge su tutte. Le unità di container query
      permettono di scriverla esatta. */

/* La pista non scorre: serve un contenitore fermo su cui appoggiare le
   sfumature di bordo, che devono restare al loro posto mentre il
   contenuto scivola sotto. I margini negativi stanno qui, così la fila
   arriva a filo schermo. */
.reel__pista {
  position: relative;
  margin-inline: calc(-1 * var(--lato));
}

/* Sfumature ai lati: dicono che il contenuto continua oltre il bordo.
   Compaiono solo dal lato dove c'è davvero dell'altro. */
.reel__pista::before,
.reel__pista::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 1rem;
  width: clamp(1.75rem, 7vw, 3.5rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.reel__pista::before {
  left: 0;
  background: linear-gradient(to right, var(--nebbia), rgba(242, 245, 246, 0));
}

.reel__pista::after {
  right: 0;
  background: linear-gradient(to left, var(--nebbia), rgba(242, 245, 246, 0));
}

.reel__pista--altro-a-sinistra::before,
.reel__pista--altro-a-destra::after { opacity: 1; }

.reel__griglia {
  display: grid;
  grid-auto-flow: column;
  /* Mai sotto i 326px, che è la soglia oltre la quale l'interfaccia di
     Instagram si rompe: su un telefono da 320px la card resta 326 e si
     scorre di un soffio in più, che è meglio di un'intestazione rotta. */
  grid-auto-columns: min(340px, max(326px, 90vw));
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--lato);
  padding-inline: var(--lato);
  padding-bottom: 1rem;
  /* la scrollbar nativa è ridondante ora che ci sono pallini e frecce */
  scrollbar-width: none;
}

.reel__griglia::-webkit-scrollbar { display: none; }

.reel {
  container-type: inline-size;
  scroll-snap-align: start;
}

/* Altezza di partenza, sostituita dal JS con quella che Instagram dichiara
   per sé: quella è misurata nel browser di chi guarda e tiene conto dei
   font di sistema, questa è solo una stima per non far saltare il layout
   nell'attimo prima. */
.reel__scena {
  position: relative;                  /* per l'indicatore di attesa */
  /* La larghezza va dichiarata: senza, appena il JS imposta un'altezza
     esplicita l'aspect-ratio si mette a derivare la larghezza da quella,
     e le card si allargano oltre la colonna. */
  width: 100%;
  aspect-ratio: 340 / 664;             /* ripiego se cqw non è supportato */
  /* Stima larga: con JavaScript viene subito sostituita da quella che
     Instagram dichiara, ma nel caso <noscript> resta questa e deve stare
     comoda — meglio un po' di bianco sotto che una riga tagliata. */
  height: calc(124cqw + 240px);
  border-radius: var(--raggio);
  overflow: hidden;
  border: 1px solid var(--filo);
  margin-bottom: 1.1rem;
  transition: height 0.2s ease;
}

/* Tinta d'attesa nei colori dell'area, nel breve momento fra l'arrivo della
   sezione e il caricamento dell'embed: un rettangolo bianco sembrerebbe un
   errore, questo sembra parte del progetto. */
.reel__scena--celeste     { background: linear-gradient(158deg, #2B6682, #0B2A45); }
.reel__scena--terracotta { background: linear-gradient(158deg, #9A5433, #55291A); }
.reel__scena--blu        { background: linear-gradient(158deg, #2C6885, #12384C); }

/* bianco pieno, come il fondo dell'embed: così l'eventuale filo di spazio
   in più sotto il player non si distingue */
.reel__scena--pronta { background: #fff; }

/* Indicatore di attesa. L'embed di Instagram ci mette qualche secondo:
   senza un segnale la card sembra un riquadro colorato rotto. */
.reel__attesa {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  color: var(--nebbia);
}

.reel__cerchio {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(242, 245, 246, 0.3);
  border-top-color: var(--nebbia);
  animation: gira 0.85s linear infinite;
}

.reel__attesa-testo {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@keyframes gira { to { transform: rotate(360deg); } }

/* L'iframe entra in dissolvenza quando ha finito, invece di apparire di scatto */
.reel__telaio { opacity: 0; transition: opacity 0.3s ease; }
.reel__scena--pronta .reel__telaio { opacity: 1; }

.reel__telaio {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.reel__area {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celeste-testo);
  margin-bottom: 0.4rem;
}

.reel__area--terracotta { color: var(--terracotta-testo); }
.reel__area--blu        { color: var(--blu); }

.reel h3 { font-size: 1.1rem; }

/* Comandi del carosello: costruiti dal JS, quindi non esistono se non
   possono funzionare. I pallini dicono quanti reel ci sono e a che punto
   sei — è il segnale che mancava, perché della card successiva si
   intravedono pochi pixel. */
.carosello {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.carosello__punti { display: flex; align-items: center; }

/* È il bottone a essere grande — 30×44px, la misura minima per un dito —
   e il pallino è disegnato dentro. Il contrario (pallino piccolo con
   un'area di tocco allargata sopra) faceva sovrapporre i bersagli dei
   pallini vicini: si toccava uno e se ne attivava un altro. */
.carosello__punto {
  position: relative;
  width: 30px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 8px;
}

.carosello__punto::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  /* Il pallino è l'unica cosa che dice quanti reel ci sono: è un comando,
     non una decorazione, e deve stare sopra 3:1 col fondo. A 0.28 stava a
     1,6:1. A distinguere quello attivo ci pensa la forma, non il colore. */
  background: rgba(31, 79, 92, 0.68);
  transition: width 0.25s ease, background-color 0.25s ease;
}

.carosello__punto--attivo::before {
  width: 24px;
  background: var(--petrolio);
}

.carosello__frecce { display: flex; gap: 0.6rem; }

.carosello__freccia {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  /* Il cerchio va visto: è lui a dire che lì c'è un comando, l'icona da
     sola galleggerebbe. A 0.3 stava a 1,7:1 e il bottone sembrava sbiadito. */
  border: 1.5px solid rgba(31, 79, 92, 0.75);
  border-radius: 50%;
  background: transparent;
  color: var(--petrolio);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.carosello__freccia svg { width: 21px; height: 21px; }

.carosello__freccia:hover:not(:disabled) {
  border-color: var(--petrolio);
  background: rgba(31, 79, 92, 0.07);
}

/* Spenta ma non fantasma. Niente opacity sull'intero bottone: sbiadiva
   cerchio e icona insieme. Meglio dichiarare i due colori, così il cerchio
   resta leggibile e a spegnersi è soprattutto la freccia. */
.carosello__freccia:disabled {
  cursor: default;
  border-color: rgba(31, 79, 92, 0.3);
  color: rgba(31, 79, 92, 0.42);
}

.reel__avviso {
  margin-top: 2rem;
  max-width: 44rem;
  font-size: 0.86rem;
  color: var(--tenue);
}

@media (max-width: 700px) {
  .reel h3 { font-size: 1.02rem; }
}

.approfondimenti__tutti { margin-top: 1.5rem; }

.approfondimenti__tutti a {
  font-weight: 700;
  color: var(--petrolio);
  text-underline-offset: 5px;
}

/* ── Contatti ────────────────────────────────────────────────────────────── */

.contatti { background: var(--carta); border-top: 1px solid var(--filo); }

.contatti__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.contatti__info h2 { margin-bottom: 2.25rem; }

.scheda {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.85rem 1.25rem;
  margin: 0 0 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--filo);
}

.scheda dt {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--petrolio);
  padding-top: 0.2rem;
}

.scheda dd { margin: 0; font-size: 0.98rem; }

/* il telefono è cliccabile: da mobile chiama, da desktop resta leggibile */
.scheda__tel {
  color: var(--petrolio);
  font-weight: 500;
  text-decoration-color: rgba(31, 79, 92, 0.35);
  text-underline-offset: 4px;
}

.scheda__tel:hover { text-decoration-color: currentColor; }

.contatti__azioni { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.contatti__social { display: flex; flex-wrap: wrap; column-gap: 1.5rem; margin-top: 1.25rem; font-size: 0.95rem; }
.contatti__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  color: var(--petrolio);
  font-weight: 500;
  text-underline-offset: 4px;
}

.mappa {
  position: relative;
  border-radius: var(--raggio);
  overflow: hidden;
  border: 1px solid var(--filo);
  min-height: 400px;
  display: flex;
  align-items: flex-end;
}

.mappa { isolation: isolate; }
.mappa__disegno { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
/* il bottone copre tutta la mappa: sembra una mappa, quindi si tocca */
.mappa .bottone::after { content: ''; position: absolute; inset: 0; }

.mappa__scheda {
  margin: 1.25rem;
  padding: 1.35rem 1.5rem;
  background: var(--carta);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(11, 42, 69, 0.13);
}

.mappa__indirizzo {
  font-family: var(--display);
  font-variation-settings: 'opsz' 40;
  font-size: 1.06rem;
  line-height: 1.35;
  color: var(--notte);
  margin-bottom: 1rem;
}

/* ── Piede ───────────────────────────────────────────────────────────────── */

.piede {
  background: var(--notte);
  color: rgba(242, 245, 246, 0.75);
  padding-block: clamp(2.75rem, 5vw, 4rem);
  font-size: 0.92rem;
}

.piede__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem 2.5rem;
}

.marchio--piede { color: var(--nebbia); margin-right: auto; }
.marchio--piede .marchio__testo strong { color: var(--nebbia); }
.marchio--piede .marchio__testo span { color: rgba(242, 245, 246, 0.62); }

.piede__dati { line-height: 1.6; }

.piede__social { display: flex; gap: 0.25rem; }

.piede__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: rgba(242, 245, 246, 0.75);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.piede__social a:hover { color: var(--nebbia); background: rgba(242, 245, 246, 0.08); }
.piede__social .icona { width: 20px; height: 20px; }

.piede__link { display: flex; gap: 1.5rem; }
.piede__link a { color: var(--nebbia); text-underline-offset: 4px; }

/* ── Barra fissa mobile ──────────────────────────────────────────────────── */

.barra-mobile {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--carta);
  border-top: 1px solid var(--filo);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 24px rgba(11, 42, 69, 0.1);
}

.barra-mobile a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 60px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--petrolio);
}

.barra-mobile .icona { width: 21px; height: 21px; }

/* la prenotazione è l'azione principale: unica voce piena */
.barra-mobile a.barra-mobile__prenota {
  background: var(--petrolio);
  color: var(--nebbia);
}

/* squadra compatta su telefono: tre foto a tutta larghezza erano tre schermate */
@media (max-width: 700px) {
  /* .team davanti: questa regola precede quella dei 960px e deve vincere */
  .team .team__aree,
  .team .area--doppia .area__persone { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .persona {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 1.1rem;
    align-items: start;
  }
  .persona__foto { grid-row: span 3; margin-bottom: 0; border-radius: 10px; }
}

/* ── Reveal allo scroll (attivato dal JS) ────────────────────────────────── */

.js-rivela {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: var(--ritardo, 0ms);
}

.js-rivela.e-visibile { opacity: 1; transform: none; }

/* =========================================================================
   Responsive
   ========================================================================= */

/* Da desktop il Metodo diventa a due colonne: il titolo resta agganciato
   a sinistra mentre il percorso scorre, così la linea si disegna sotto
   gli occhi di chi legge invece di lasciare mezza pagina vuota. */
@media (min-width: 961px) {
  .metodo .contenitore {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .metodo .sezione__intro {
    margin-bottom: 0;
    position: sticky;
    top: 128px;
  }

  .percorso { max-width: none; }
}

@media (max-width: 960px) {
  .contatti__griglia { grid-template-columns: minmax(0, 1fr); }

  /* Fisioterapia su una riga, Nutrizione e Psicoterapia affiancate sotto */
  .team__aree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area--doppia { grid-column: 1 / -1; }

  .mappa { min-height: 320px; }
}

@media (max-width: 780px) {
  .navigazione,
  .testata__cta { display: none; }

  .menu { display: block; }

  .barra-mobile { display: flex; }

  body { padding-bottom: 64px; }

  .scheda { grid-template-columns: minmax(0, 1fr); gap: 0.25rem 0; }
  .scheda dd { margin-bottom: 1rem; }
}

@media (max-width: 420px) {
  .eroe__azioni .bottone,
  .contatti__azioni .bottone { width: 100%; }

  /* su schermi molto stretti il nome andava a capo su tre righe */
  .testata .marchio__testo span { display: none; }
  .testata .marchio__testo strong { white-space: nowrap; font-size: 1rem; }
}

/* =========================================================================
   Preferenze di sistema
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js-rivela { opacity: 1; transform: none; }
  .percorso__riempimento { transform: scaleY(1); }
}

@media print {
  .testata, .barra-mobile, .salta, .eroe__visual, .mappa__disegno { display: none; }
  body { background: #fff; padding-bottom: 0; }
}