/* =========================================================================
   Design system Casalpusterlengo Fisioterapia e Medicina
   Palette e componenti condivisi da tutto il sito (home, punto prelievi,
   schede medici/fisioterapisti, poliambulatorio, terapie...).
   ========================================================================= */
:root{
  --verde:#4C7529;
  --verde-md:#5E8F32;
  --verde-chiaro:#99C564;
  --wash:#F2F7EA;
  --bordo:#DDE6D0;
  --ink:#26302A;
  --grigio:#5E665B;
  --stelle:#B5730A;
  --verde-hover:#3D5F21;
  --whatsapp:#25D366;

  /* altezza unica dei riquadri immagine grandi (apertura, sezioni, galleria,
     mappa): cambiando questo valore si muovono tutti insieme */
  --h-media:25rem;

  /* Ricolora l'intero sito (bottoni, hover del menu, titoli...) dal blu
     originale al verde del nuovo stile: --primary/--light sono usati in
     decine di regole gia' esistenti in css/style.css. */
  --primary:#4C7529;
  --light:#99C564;
}

/* Le dimensioni dichiarate nell'HTML servono solo a riservare lo spazio mentre
   l'immagine carica: non devono imporre l'altezza reale. Senza questa riga il
   ritratto di un medico veniva mostrato alto quanto il file originale e
   ritagliato a meta'. */
img{height:auto}

body{
  color:var(--ink);
  font-family:'Figtree',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
h1,h2,h3,h4{
  font-family:'Poppins','Century Gothic',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
}
.section-title h1, h1.page-title{
  color:var(--verde);
  font-weight:600;
  text-transform:none;
  letter-spacing:-.01em;
  /* su schermo stretto il titolo si adatta invece di uscire dalla pagina:
     "POLIAMBULATORIO" da solo era piu' largo di un telefono */
  font-size:clamp(1.6rem, 7vw, 2.5rem);
  line-height:1.15;
  overflow-wrap:break-word;
}

.wrap{max-width:70rem; margin:0 auto; padding:0 1.25rem}

/* ---------- pulsanti ---------- */
.btn-cfm{display:inline-block; text-decoration:none; font-weight:600; border-radius:10px;
  padding:.85rem 1.4rem; font-size:1rem; line-height:1.2; border:2px solid transparent; cursor:pointer}
a.btn-cfm-primary, .btn-cfm-primary{background:var(--verde); color:#fff; font-weight:700}
a.btn-cfm-primary:hover, .btn-cfm-primary:hover{background:var(--verde-hover); color:#fff}
a.btn-cfm-secondary, .btn-cfm-secondary{background:#fff; color:var(--verde); border-color:var(--bordo)}
a.btn-cfm-secondary:hover, .btn-cfm-secondary:hover{border-color:var(--verde-md)}
a.btn-cfm-wa, .btn-cfm-wa{background:#fff; color:#146B42; border:2px solid #C9E2D3; font-weight:600}
a.btn-cfm-wa:hover, .btn-cfm-wa:hover{border-color:var(--whatsapp)}

/* ---------- sezioni generiche ---------- */
.section-cfm{padding-top:3rem; padding-bottom:3rem; border-top:1px solid var(--bordo)}
.section-cfm h2{font-size:1.55rem; font-size:clamp(1.3rem,2.8vw,1.55rem); color:var(--verde);
  margin-bottom:.9rem; font-weight:600}
.section-intro{color:var(--grigio); max-width:62ch}
.section-tag{font-size:.75rem; text-transform:uppercase; letter-spacing:.11em;
  color:#697460; font-weight:600; margin:0 0 .45rem}

.split-cfm{display:flex; flex-wrap:wrap; gap:2.75rem; align-items:flex-start}
.split-cfm .split-tx{flex:1 1 23rem; min-width:0}
.split-cfm .split-im{flex:1 1 18rem; min-width:0}
.split-cfm .split-im img{border-radius:16px; width:100%; height:var(--h-media); object-fit:cover}

/* ---------- fascia info ---------- */
.info-band{display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2.75rem;
  padding:1.4rem 0; border-top:1px solid var(--bordo); border-bottom:1px solid var(--bordo)}
.info-band div{flex:1 1 13rem}
.info-band .info-et{font-size:.74rem; text-transform:uppercase; letter-spacing:.1em;
  color:#697460; margin-bottom:.25rem}
.info-band .info-vl{font-weight:600; font-size:1rem}

/* ---------- tag evidenza / elenchi a colonne ---------- */
.tag-list{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.1rem 0}
.tag-list span{background:var(--wash); color:var(--verde); font-weight:600; font-size:.93rem;
  padding:.42rem .9rem; border-radius:8px}

.cols-list{columns:2; column-gap:2.5rem; margin:1rem 0 0; padding:0; list-style:none}
.cols-list li{break-inside:avoid; padding:.32rem 0 .32rem 1.15rem; position:relative; font-size:.99rem}
.cols-list li::before{content:""; position:absolute; left:0; top:.88rem; width:6px; height:6px;
  border-radius:50%; background:var(--verde-chiaro)}

/* ---------- recensioni ---------- */
.reviews-block{margin-top:2.25rem; padding-top:1.5rem; border-top:1px solid var(--bordo)}
.reviews-title{font-size:1rem; color:#697460; text-transform:uppercase; letter-spacing:.09em;
  font-weight:600; margin-bottom:.4rem}
.reviews{display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:1.5rem}
.review-card{flex:1 1 16rem; border-left:4px solid var(--verde-chiaro); padding:.2rem 0 .2rem 1.25rem}
.review-stelle{color:var(--stelle); letter-spacing:.14em; margin-bottom:.55rem; font-size:.95rem}
.review-card p{font-size:1rem; color:#3D453A; margin:0 0 .6rem}
.review-autore{font-size:.87rem; color:#697460; font-weight:600}
.review-tutte{margin-top:1.25rem; font-size:.97rem}
.review-tutte a{font-weight:600}

/* ---------- griglia di persone/servizi (elenchi medici, fisioterapisti) ---------- */
.persone-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1.5rem; margin-top:2rem}
.persona-card{display:flex; flex-direction:column; text-decoration:none; background:#fff;
  border:1px solid var(--bordo); border-radius:16px; overflow:hidden; height:100%;
  transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease}
.persona-card:hover{border-color:var(--verde-chiaro); box-shadow:0 6px 20px rgba(38,48,42,.10); transform:translateY(-2px)}
.persona-foto{aspect-ratio:4/5; width:100%; height:auto; object-fit:cover; object-position:center 20%; display:block; background:var(--wash)}
.persona-foto-vuota{aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
  background:var(--wash); color:var(--verde); font-family:'Poppins',sans-serif; font-size:2.2rem; font-weight:600}
.persona-testo{padding:1rem 1.15rem 1.25rem}
.persona-nome{font-family:'Poppins',sans-serif; font-size:1.02rem; font-weight:600; color:var(--verde);
  margin:0 0 .2rem; line-height:1.3}
.persona-ruolo{font-size:.92rem; color:var(--grigio); margin:0; line-height:1.4}

.reparto{background:var(--wash); border-radius:18px; padding:2rem 2.25rem; margin-top:2rem;
  display:flex; flex-wrap:wrap; gap:1.25rem 2.5rem; align-items:center}
.reparto-tx{flex:1 1 26rem; min-width:0}
.reparto h2{margin:.1rem 0 .6rem; font-size:1.35rem; font-weight:600; color:var(--verde)}
.reparto p{margin:0; color:var(--grigio); max-width:64ch; line-height:1.65}
.reparto .reparto-azione{flex:0 0 auto; margin:0}
.poli-titolo{margin:2.75rem 0 0; font-size:1.35rem; font-weight:600; color:var(--verde)}

/* Testata senza fotografia: tinta piena, per le pagine dei disturbi che non
   hanno un'immagine propria. */
.pagina-hero-tinta{background:linear-gradient(135deg,#3F6620,#5E8F32)}
.pagina-hero-tinta::before{background:transparent}

/* --- terapie collegate in fondo alla scheda ------------------------------ */
.correlate{margin:2.5rem 0 2rem; padding-top:1.8rem; border-top:1px solid var(--bordo)}
.correlate h2{font-size:1.15rem; font-weight:600; color:var(--verde); margin:0 0 1.1rem}
.correlate-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem}
.correlata{display:block; padding:1rem 1.15rem; border:1px solid var(--bordo); border-radius:14px;
  background:#fff; text-decoration:none; transition:border-color .15s ease, transform .15s ease}
.correlata:hover{border-color:var(--verde-chiaro); transform:translateY(-2px)}
.correlata-nome{display:block; font-weight:600; color:var(--verde); line-height:1.35}
.correlata-sub{display:block; margin-top:.35rem; font-size:.9rem; color:var(--grigio); line-height:1.5}

/* --- ambulatori del poliambulatorio ------------------------------------- */
.ambulatorio{padding-top:2.4rem; padding-bottom:2.4rem; border-top:1px solid var(--bordo)}
.ambulatorio:first-of-type{border-top:0; padding-top:1rem}
.amb-testa{display:flex; gap:1.1rem; align-items:flex-start}
.amb-bollo{flex:0 0 auto; width:3.25rem; height:3.25rem; border-radius:50%;
  background:var(--wash); color:var(--verde); display:flex; align-items:center; justify-content:center}
.amb-bollo .amb-icona{display:block}
.amb-intro{min-width:0}
.amb-intro h2{margin:.35rem 0 .55rem; font-size:1.35rem; font-size:clamp(1.2rem,2.6vw,1.35rem);
  font-weight:600; color:var(--verde)}
.amb-intro p{margin:0; color:var(--grigio); max-width:66ch; line-height:1.7}
.amb-intro p + p{margin-top:.85rem}
.amb-esami-et{margin-top:1rem !important; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.08em; font-weight:600; color:var(--verde)}
.amb-esami{margin-top:.5rem !important; display:flex; flex-wrap:wrap; gap:.5rem}
.amb-esami a{display:inline-block; padding:.42rem .8rem; border-radius:999px;
  background:var(--wash); border:1px solid var(--bordo); color:var(--verde);
  font-size:.92rem; font-weight:600; text-decoration:none; line-height:1.35}
.amb-esami a:hover{border-color:var(--verde-chiaro); background:#fff}
.amb-azione{margin-top:1rem !important}
.ambulatorio .persone-grid{margin-top:1.5rem}
@media (max-width:520px){
  .amb-testa{gap:.85rem}
  .amb-bollo{width:2.6rem; height:2.6rem}
  .amb-bollo svg{width:24px; height:24px}
}

/* ---------- griglia delle terapie ---------- */
.terapie-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); gap:1.5rem; margin-top:2rem}
.terapia-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--bordo);
  border-radius:16px; overflow:hidden}
a.terapia-card-link{text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
a.terapia-card-link:hover, a.terapia-card-link:focus-visible{transform:translateY(-3px);
  border-color:var(--verde-chiaro); box-shadow:0 12px 26px rgba(38,48,42,.10); color:inherit; text-decoration:none}
.terapia-foto{width:100%; height:11rem; object-fit:cover; display:block}
.terapia-testo{display:flex; flex-direction:column; flex:1 1 auto; padding:1.25rem 1.4rem 1.5rem}
.terapia-testo h2{font-family:'Poppins',sans-serif; font-size:1.02rem; font-weight:600; color:var(--verde);
  letter-spacing:.02em; margin:0 0 .6rem; line-height:1.35}
.terapia-corpo{font-size:.97rem; color:var(--grigio); line-height:1.6; margin:0}

/* ---------- schede individuali (medici, fisioterapisti, prestazioni) ---------- */
.scheda-hero{padding-top:2.5rem; padding-bottom:1.75rem}
.scheda-hero-in{display:flex; flex-wrap:wrap; gap:2rem; align-items:center}
.scheda-hero-foto{flex:0 0 auto; width:13rem; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center 20%;
  border-radius:16px; border:1px solid var(--bordo)}
.scheda-hero-tx{flex:1 1 22rem; min-width:0}
/* foto con una riga di nota sotto (per esempio se e' stata modificata con l'IA) */
.scheda-hero-fig{flex:0 0 auto; width:13rem; margin:0}
.scheda-hero-fig .scheda-hero-foto{display:block; width:100%; max-width:none}
.scheda-hero-nota{margin:.45rem .15rem 0; font-size:.75rem; line-height:1.35; color:var(--grigio)}
.scheda-hero h1{font-size:2rem; font-size:clamp(1.5rem,3.2vw,2rem); font-weight:600; color:var(--verde);
  letter-spacing:-.01em; margin:.2rem 0 0}
.scheda-sub{font-size:1.1rem; color:var(--grigio); margin:.6rem 0 0}
.scheda-nota{display:inline-block; margin:.9rem 0 0; padding:.4rem .85rem; border-radius:8px;
  background:var(--wash); color:var(--verde); font-size:.93rem; font-weight:600}
.scheda-nota a{color:inherit}
.scheda-corpo{padding-top:1.5rem; padding-bottom:2.5rem; border-top:1px solid var(--bordo)}
.scheda-corpo .container{padding:0; max-width:none}
/* le classi di spaziatura del vecchio template (fino a 100px sopra e sotto)
   lasciavano buchi enormi dentro le schede */
.scheda-corpo .space-small,
.scheda-corpo .space-medium,
.scheda-corpo .space-large,
.scheda-corpo .space-ex-large{padding-top:0; padding-bottom:0}
.scheda-corpo .row{margin:0}
.scheda-corpo [class*="col-"]{padding:0}
/* nelle schede molti testi sono marcati come titoli: li riporto a testo normale */
.scheda-corpo h3{font-family:'Figtree',sans-serif; font-size:1.02rem; font-weight:400;
  color:var(--ink); line-height:1.65; margin:0 0 .9rem; max-width:70ch}
.scheda-corpo h3 ul, .scheda-corpo h3 p{font-size:1rem}
.scheda-corpo h2{font-family:'Poppins',sans-serif; font-size:1.25rem; font-weight:600; color:var(--verde);
  margin:1.8rem 0 .8rem}
.scheda-corpo h4{font-size:1rem; font-weight:400; color:var(--ink); line-height:1.65; max-width:70ch}
.scheda-corpo p, .scheda-corpo li{max-width:70ch}
.scheda-corpo img{border-radius:14px; max-width:min(100%,34rem); height:auto}
/* Gli schemi esplicativi hanno testo dentro: vanno letti alla larghezza
   piena della colonna, non ridotti come una fotografia. */
/* Niente ingrandimento oltre la misura nativa: uno schema piccolo
   sgranerebbe. */
.scheda-corpo img.schema{max-width:100%; display:block; margin:1rem 0 1.25rem}
.scheda-torna{padding-bottom:3rem}
/* Foto a fianco del testo in una scheda o in una news; su telefono sopra. */
.scheda-corpo .news-foto{float:right; width:min(260px,40%); margin:.3rem 0 1rem 1.75rem}
.scheda-corpo .news-foto img{display:block; width:100%; height:auto; border-radius:12px}
.scheda-corpo .news-foto figcaption{font-size:.8rem; color:var(--grigio); margin-top:.4rem; line-height:1.35}
.scheda-corpo .news-foto ~ ul{display:flow-root}
@media (max-width:600px){ .scheda-corpo .news-foto{float:none; width:220px; margin:0 auto 1.25rem} }

/* ---------- galleria ---------- */
/* Tre colonne: le sei foto riempiono due righe intere a ogni larghezza,
   senza caselle vuote in fondo. */
.gallery-cfm{display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:1rem; margin-top:1.5rem}
.gallery-cfm img{border-radius:12px; width:100%; height:var(--h-media); object-fit:cover; display:block}
@media (max-width:640px){.gallery-cfm img{height:14rem}}

/* Testo con una foto verticale intera a fianco; su telefono la foto va sotto. */
.foto-lato{display:grid; grid-template-columns:minmax(0,34rem) minmax(0,15rem); justify-content:start; gap:3rem; align-items:center}
.foto-lato img{display:block; width:100%; height:auto; border-radius:12px}
@media (max-width:640px){.foto-lato{grid-template-columns:1fr; gap:1.25rem} .foto-lato img{max-width:16rem}}
.foto-lato-due{grid-template-columns:minmax(0,30rem) minmax(0,26rem)}
.foto-lato-largo{grid-template-columns:minmax(0,30rem) minmax(0,24rem)}
.foto-lato .ritratti{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.foto-lato figure{margin:0}
.foto-lato figcaption{font-size:.85rem; color:#5d6656; margin-top:.45rem; line-height:1.35}
@media (max-width:640px){.foto-lato-due,.foto-lato-largo{grid-template-columns:1fr} .foto-lato .ritratti img{max-width:none} .foto-lato-largo img{max-width:100%}}

/* ---------- pannello contatti (footer alternativo/box contatti pagina) ---------- */
.contact-panel{background:var(--wash); border-radius:18px; padding:2.1rem 2.4rem; margin:2.5rem 0 2rem}
.contact-panel h2{color:var(--verde); font-size:1.4rem; margin-bottom:1.3rem; font-weight:600}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.1rem}
.contact-grid .contact-card{background:#fff; border:1px solid var(--bordo); border-radius:12px; padding:1rem 1.25rem}
.contact-grid .info-et{font-size:.74rem; text-transform:uppercase; letter-spacing:.09em;
  color:#697460; margin-bottom:.3rem}
.contact-grid a.contact-numero{display:block; font-size:1.3rem; font-weight:700; text-decoration:none; line-height:1.25; color:var(--ink)}
.contact-grid a.contact-mail{font-size:1rem; word-break:break-all; color:var(--ink)}
.contact-actions{display:flex; gap:.5rem; margin-top:.7rem}
.contact-actions a{flex:1; text-align:center; text-decoration:none; font-size:.9rem; font-weight:600;
  padding:.45rem .5rem; border-radius:8px; background:var(--wash); color:var(--verde); border:1px solid var(--bordo)}
.contact-actions a:hover{background:#E6EFD8}
.contact-indirizzo{margin-top:1.5rem; font-style:normal; line-height:1.85; color:#3D453A}

.legal-note{font-size:.84rem; color:#697460; line-height:1.7; padding:1.5rem 0 3rem;
  border-top:1px solid var(--bordo)}

/* ---------- domande frequenti ---------- */
.faq-cfm details{border-bottom:1px solid var(--bordo); padding:.9rem 0}
.faq-cfm summary{cursor:pointer; font-weight:700; color:var(--ink); list-style:none;
  display:flex; align-items:center; gap:.75rem}
.faq-cfm summary::-webkit-details-marker{display:none}
.faq-cfm summary::before{content:"+"; color:var(--verde-chiaro); font-size:1.4rem; line-height:1; width:1rem}
.faq-cfm details[open] summary::before{content:"\2013"}
.faq-cfm details p{margin:.7rem 0 0 1.75rem; color:var(--grigio)}

/* ---------- box in evidenza (orari, numeri, ecc.) ---------- */
.stat-panel{flex:0 0 auto; background:#fff; border:1px solid var(--bordo);
  border-radius:14px; padding:1.3rem 1.8rem; text-align:center; min-width:14.5rem}
.stat-panel .stat-label{font-weight:700; color:var(--verde); font-size:1rem; margin-bottom:.4rem}
.stat-panel .stat-value{font-size:2.5rem; font-size:clamp(2.05rem,5vw,2.5rem); font-weight:800;
  color:var(--verde); line-height:1}
.stat-panel .stat-note{font-size:.87rem; color:var(--grigio); margin-top:.5rem}

/* ---------- titoli in stampatello (pagine che lo richiedono) ---------- */
/* Titoli in maiuscole e minuscole normali: si leggono meglio, soprattutto
   quelli lunghi delle schede. Il maiuscolo resta solo sulle etichette piccole.
   (Fino a ottobre 2026 erano tutti in stampatello: per tornare indietro basta
   rimettere text-transform:uppercase qui e nella regola h1.page-title.) */
h1, h2, h3{
  text-transform:none;
  letter-spacing:-.005em;
}
/* Eccezione: nelle schede h3 e h4 non sono titoli, il contenuto originale li
   usa per il corpo del testo, che deve restare in minuscolo. */
.scheda-corpo h3,
.scheda-corpo h4{
  text-transform:none;
  letter-spacing:normal;
}
/* ...salvo i veri sottotitoli delle pagine nuove, marcati con la classe */
.scheda-corpo h3.sottotitolo{font-family:'Poppins',sans-serif; font-size:1.05rem; font-weight:600;
  color:var(--ink); line-height:1.4; margin:1.5rem 0 .5rem}

/* ---------- griglia orari ---------- */
.hours-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; margin-top:1.5rem}
.hours-grid .stat-panel{min-width:0; padding:1.2rem 1.4rem}
.stat-panel .stat-value-sm{font-size:1.4rem; font-weight:700; color:var(--verde); line-height:1.2}
.stat-panel .stat-group{margin-top:.75rem}

/* ---------- mappa incorporata ---------- */
.map-embed{margin-top:1.5rem; border-radius:16px; overflow:hidden; border:1px solid var(--bordo)}
.map-embed iframe{display:block; width:100%; height:var(--h-media); border:0}
.mappa-differita{height:var(--h-media); display:flex; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(120% 120% at 30% 20%, #fff 0%, var(--wash) 70%)}
.mappa-differita iframe{height:100%}
.mappa-avviso{max-width:26rem; padding:1.25rem; color:var(--grigio)}
.mappa-avviso svg{color:var(--verde-md)}
.mappa-indirizzo{margin:.5rem 0 .6rem; color:var(--ink); line-height:1.4}
.mappa-nota{font-size:.85rem; line-height:1.45; margin:0 0 1rem}
.mappa-azioni{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:0}
/* su schermi stretti l'altezza unica scende, restando uguale per tutti */
@media (max-width:640px){ :root{--h-media:18rem} }

/* ---------- box informativo in evidenza (verde chiaro) ---------- */
.callout-cfm{background:var(--wash); border-radius:12px; padding:1.4rem 1.6rem; margin-top:1.25rem}
.callout-cfm p:last-child{margin-bottom:0}

/* ---------- elenco passi numerati ---------- */
.steps-cfm{list-style:none; padding:0; margin:1.5rem 0 0; counter-reset:step}
.steps-cfm li{counter-increment:step; display:flex; gap:1rem; padding:.85rem 0; border-top:1px solid var(--bordo)}
.steps-cfm li:first-child{border-top:0}
.steps-cfm li::before{content:counter(step); flex:0 0 2rem; height:2rem; border-radius:50%;
  background:var(--wash); color:var(--verde); font-weight:700; display:flex;
  align-items:center; justify-content:center; font-size:.95rem}

/* ---------- tabella prezzi/listino ---------- */
/* su schermi stretti la tabella scorre da sola, senza trascinare la pagina */
.tabella-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:1.25rem}
.tabella-scroll .table-cfm{margin-top:0; min-width:30rem}
.table-cfm{width:100%; border-collapse:collapse; margin-top:1.25rem; font-size:1rem}
.table-cfm caption{text-align:left; color:var(--grigio); font-size:.95rem; padding-bottom:.6rem}
.table-cfm th{text-align:left; font-size:.82rem; letter-spacing:.04em; color:var(--grigio);
  border-bottom:2px solid var(--bordo); padding:.5rem .6rem; font-weight:600}
.table-cfm td{padding:.75rem .6rem; border-bottom:1px solid var(--bordo); vertical-align:top}
.table-cfm td:first-child{font-weight:700; color:var(--verde)}
.table-cfm td:last-child{text-align:right; white-space:nowrap; font-weight:700; color:var(--verde)}
.table-cfm .table-desc{display:block; font-weight:400; color:var(--grigio); font-size:.9rem; margin-top:.15rem}

/* ---------- menu di navigazione (header.inc) ---------- */
.header{
  box-shadow:0 1px 0 var(--bordo);
}
#logo a.logo{display:inline-block}
#navigation>ul>li>a{
  font-family:'Poppins',sans-serif;
  color:var(--ink);
  letter-spacing:.04em;
}
#navigation.small-screen ul li a{
  font-family:'Poppins',sans-serif;
}

/* ---------- footer (footer.inc) ---------- */
.footer{padding-top:3.5rem; padding-bottom:2rem}
.footer-in{display:grid; grid-template-columns:1.25fr 1.35fr 1.1fr auto; gap:2rem 2.5rem;
  align-items:start}
.footer-col{min-width:0}
.footer .widget-title{font-family:'Poppins',sans-serif; color:#fff; font-size:.82rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.11em; border:0; padding:0; margin:0 0 1rem}

.footer-indirizzo, .footer-mail{margin:0 0 .8rem; line-height:1.65; font-size:.95rem}
.footer-indirizzo a, .footer-mail a{color:#D3DBCE; text-decoration:none}
.footer-indirizzo a:hover, .footer-mail a:hover{color:#fff; text-decoration:underline}

.footer-tel, .footer-orari{list-style:none; margin:0; padding:0}
.footer-tel li{margin-bottom:.9rem}
.footer-orari li{margin-bottom:.9rem; color:#D3DBCE; font-size:.93rem; line-height:1.6}
.footer-et{display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.09em;
  color:#97A38F; margin-bottom:.15rem}
a.footer-num{color:#fff; font-size:1.06rem; font-weight:600; text-decoration:none; line-height:1.3}
a.footer-num:hover{color:var(--verde-chiaro)}
a.footer-wa{display:inline-block; margin-left:.7rem; font-size:.84rem; color:#9FD2B4;
  text-decoration:none; border-bottom:1px solid rgba(159,210,180,.4)}
a.footer-wa:hover{color:#fff; border-bottom-color:#fff}

.footer-social-ic{margin:0; display:flex; gap:.6rem}
.footer-social-ic a{display:flex; width:2.4rem; height:2.4rem; border-radius:50%;
  align-items:center; justify-content:center; background:#333736; color:#D3DBCE; font-size:1.1rem}
.footer-social-ic a:hover{background:var(--verde); color:#fff}

.footer-legale{margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid #3A3E3C}
.footer-legale p{color:#97A38F; font-size:.83rem; line-height:1.7; margin:0 0 .35rem; max-width:95ch}
.footer-legale .footer-policy{margin-top:.6rem}
.footer-legale p:last-child{margin-bottom:0}
.footer-legale a{color:#C7D9AE; text-decoration:underline}
.footer-legale a:hover{color:#fff}

@media (max-width:900px){
  .footer-in{grid-template-columns:1fr 1fr; gap:2rem}
}
@media (max-width:560px){
  .footer{padding-top:2.5rem}
  .footer-in{grid-template-columns:1fr; gap:1.75rem}
}

/* Su telefono i collegamenti del footer (numeri, WhatsApp, email, policy)
   diventano abbastanza alti da centrarli con il dito: prima erano alti
   15-25 px, sotto la soglia consigliata di 44 px. */
@media (max-width:760px){
  a.footer-num, a.footer-wa, .footer-mail a, .footer-legale .footer-policy a{
    display:inline-block;
    min-height:44px;
    line-height:44px;
  }
  a.footer-wa{margin-left:1rem}
  .footer-tel li{margin-bottom:.15rem}
}

/* Pagine che riportano gia' i recapiti nel corpo (es. Contatti): il footer
   non li ripete, restano social e dati legali. */
.footer-senza-contatti .footer-blocco-contatti{display:none}

@media (max-width:640px){
  .cols-list{columns:1}
  .contact-panel{padding:1.5rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ---------- hub "Centro fisioterapico": schede di navigazione ---------- */
.hub-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.5rem; margin-top:2.25rem}
.hub-card{display:flex; flex-direction:column; gap:.6rem; padding:1.75rem; background:#fff;
  border:1px solid var(--bordo); border-radius:16px; text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.hub-card:hover, .hub-card:focus-visible{transform:translateY(-3px); border-color:var(--verde-chiaro);
  box-shadow:0 12px 26px rgba(38,48,42,.10); text-decoration:none; color:inherit}
.hub-card h2, .hub-card h3{margin:0; font-size:1.2rem; font-weight:600; color:var(--verde)}
.hub-card p{margin:0; color:var(--grigio); font-size:.95rem; line-height:1.6}
.hub-azione{margin-top:auto; padding-top:.7rem; font-weight:600; font-size:.92rem; color:var(--verde)}

/* ---------- hero delle pagine interne con immagine di sfondo ---------- */
.pagina-hero{position:relative; background:var(--verde) center/cover no-repeat; color:#fff;
  padding:3.5rem 0 3rem; margin-bottom:0}
.pagina-hero::before{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(28,42,18,.82),rgba(28,42,18,.55))}
.pagina-hero-in{position:relative; z-index:1}
.pagina-hero .pagina-occhiello{font-size:.76rem; text-transform:uppercase; letter-spacing:.12em;
  font-weight:600; color:#D6E8BF; margin:0 0 .5rem}
.pagina-hero h1{margin:0; color:#fff; font-size:2rem; font-size:clamp(1.5rem,3.4vw,2.1rem);
  font-weight:600; letter-spacing:.02em; max-width:24ch}
.pagina-hero .pagina-sub{margin:.85rem 0 0; color:#E4EFD6; max-width:60ch; line-height:1.6}

/* ---------- elenco quadri clinici ---------- */
.patologie-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.5rem;
  margin-top:2.25rem; align-items:start}
.patologia-card{background:#fff; border:1px solid var(--bordo); border-radius:16px; padding:1.5rem 1.6rem}
.patologia-card h2{margin:0 0 .85rem; font-size:1.08rem; font-weight:600; color:var(--verde)}
.patologia-card ul{list-style:none; margin:0; padding:0}
.patologia-card li{position:relative; padding-left:1.1rem; margin-bottom:.5rem; color:var(--grigio);
  font-size:.94rem; line-height:1.55}
.patologia-card li::before{content:""; position:absolute; left:0; top:.55em; width:.42rem; height:.42rem;
  border-radius:50%; background:var(--verde-chiaro)}
.patologia-card > p{margin:0; color:var(--grigio); font-size:.94rem; line-height:1.6}

/* liste nel corpo delle schede/terapie: stesso peso del testo, respiro sotto */
.scheda-corpo ul{margin:0 0 1.15rem; padding-left:1.3rem; max-width:70ch}
.scheda-corpo ul li{margin-bottom:.45rem; font-size:1rem; line-height:1.65}
.scheda-corpo h2{margin-top:1.9rem}
.scheda-corpo > *:first-child{margin-top:0}
/* i titoli interni delle schede restano allineati al testo anche quando il
   contenuto originale li centrava */
.scheda-corpo h2, .scheda-corpo h3, .scheda-corpo h4{text-align:left}

/* blocco "Dove siamo" in fondo alla home */
.home-indirizzo{font-style:normal; font-size:1.06rem; line-height:1.6; color:var(--ink); margin:0 0 1rem}
.cols-list.cols-uno{columns:1}

/* ---------- punti di forza in home ---------- */
.punti-sezione{padding-top:2.5rem; padding-bottom:.5rem}
.punti-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.25rem}
.punto-card{background:var(--wash); border-radius:16px; padding:1.5rem 1.6rem; border-top:3px solid var(--verde-chiaro)}
.punto-card h2{margin:0 0 .5rem; font-size:1.05rem; font-weight:600; color:var(--verde); line-height:1.35}
.punto-card p{margin:0; color:var(--grigio); font-size:.97rem; line-height:1.6}

/* Il template originale tira la navigazione 20px a sinistra (#navigation
   left:-20px !important): sul menu mobile questo porta la voce "Menu" e le
   voci aperte fuori dal bordo dello schermo. */
#navigation.small-screen{left:0 !important}
#navigation.small-screen #menu-button{padding-left:0; padding-right:0}
#navigation.small-screen #menu-button:after{right:0}
#navigation.small-screen > ul > li > a{padding-left:0; padding-right:0}
/* stesso margine laterale dell'intestazione e del contenuto delle pagine */
.header > .container{padding-left:1.25rem; padding-right:1.25rem}
/* voci dell'elenco che rimandano alla pagina della prestazione */
.cols-list a{color:var(--verde); text-decoration:none; border-bottom:1px solid var(--bordo)}
.cols-list a:hover{color:var(--verde-hover); border-bottom-color:var(--verde-md)}

/* indirizzi web e parole molto lunghe: vanno a capo invece di allargare la pagina */
.scheda-corpo, .wrap p, .wrap li, .wrap td{ overflow-wrap:anywhere; }

/* Aree toccabili: su telefono i numeri della pagina Contatti e i collegamenti
   agli esami nella home diventano alti almeno 44 px, la soglia oltre la quale
   si centrano comodamente col dito. */
@media (max-width:760px){
  .contact-grid a.contact-numero{min-height:44px; display:flex; align-items:center}
  .cols-list li a{display:inline-block; padding:.55rem 0}
}

/* "Chi esegue l'esame" in fondo alle schede delle prestazioni */
.esecutori{margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--bordo)}
.esecutori h2{margin-bottom:.8rem}
.esecutori ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.75rem}
.esecutori li{background:var(--wash); border-radius:10px; padding:.7rem 1.1rem}
.esecutori a{font-weight:600; text-decoration:none}
.esecutori a:hover{text-decoration:underline}
.esecutori .esecutori-et{font-family:inherit; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em;
  font-weight:600; color:var(--grigio); margin:1.1rem 0 .6rem}
.esecutori h2 + .esecutori-et{margin-top:.2rem}
.esecutore-ruolo{display:block; font-size:.9rem; color:var(--grigio); font-weight:400}

/* domande frequenti */
.faq{display:grid; gap:.6rem; margin-top:1.4rem}
.faq details{background:#fff; border:1px solid var(--bordo); border-radius:12px; padding:.2rem 1.15rem}
.faq summary{cursor:pointer; padding:.9rem 0; font-weight:600; color:var(--verde);
  font-family:'Poppins',sans-serif; font-size:1rem; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; font-weight:400; color:var(--grigio); font-size:1.2rem; line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 1rem; color:var(--grigio); line-height:1.65; max-width:70ch}

/* ---------- intestazione che resta in alto ----------
   La faceva un componente jQuery che spostava l'elemento e gli metteva
   position:fixed. Lo stesso risultato si ottiene con una riga di CSS, senza
   scaricare nulla. Sotto i 768 pixel resta ferma, come prima. */
@media (min-width:769px){
  .header{position:sticky; top:0; z-index:100; background:#fff}
  /* le ancore non finiscono sotto l'intestazione fissa */
  section[id], header[id], div[id], h2[id]{scroll-margin-top:8rem}
}

/* collegamento "Lavora con noi" nel piede di pagina */
.footer-lavora{margin:1.1rem 0 0}
.footer-lavora a{color:#C7D9AE; font-weight:600}
.footer-lavora a:hover{color:#fff}

/* ---------- centro fisioterapico: quadri trattati per zona del corpo ----------
   Stesse schede della pagina dei quadri clinici, ma qui ogni voce e' un
   collegamento alla pagina del disturbo. Il titolo della scheda e' un h3
   perche' sta sotto l'h2 "Che cosa trattiamo". */
.patologia-card h3{margin:0 0 .85rem; font-size:1.08rem; font-weight:600; color:var(--verde)}
.aree-grid{margin-top:1.6rem}
.aree-grid .patologia-card li a{color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--bordo); transition:color .15s, border-color .15s}
.aree-grid .patologia-card li a:hover,
.aree-grid .patologia-card li a:focus-visible{color:var(--verde); border-bottom-color:var(--verde-chiaro)}

/* etichette che sono collegamenti: stesso aspetto delle etichette normali,
   ma si capisce che si possono toccare */
.tag-list.tag-link{display:flex; margin:.9rem 0 0}
.tag-list a{background:var(--wash); color:var(--verde); font-weight:600; font-size:.93rem;
  padding:.42rem .9rem; border-radius:8px; text-decoration:none; border:1px solid transparent;
  transition:border-color .15s}
.tag-list a:hover, .tag-list a:focus-visible{border-color:var(--verde-chiaro)}
/* le voci sono collegamenti da toccare col dito: servono almeno 32px di
   altezza, e il testo dei passi non deve superare una riga leggibile */
.aree-grid .patologia-card li{margin-bottom:.15rem}
.aree-grid .patologia-card li a{display:inline-block; padding:.32rem 0}
.aree-grid .patologia-card li::before{top:1em}
#come-lavoriamo .steps-cfm li > div{max-width:72ch}

/* pulsanti dentro i riquadri di invito nelle schede di terapie e disturbi */
.callout-azioni{display:flex; flex-wrap:wrap; gap:.75rem; margin:1rem 0 0}

/* palestra riabilitativa: attrezzatura e foto */
.pa-attrezzi{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; margin:1.25rem 0 0; padding:0; list-style:none}
.scheda-corpo .pa-attrezzi li{max-width:none; margin:0; padding:1rem 1.1rem; border:1px solid var(--bordo); border-radius:14px; background:#fff; line-height:1.55}
.pa-attrezzi strong{display:block; color:var(--verde); margin-bottom:.2rem}
.scheda-corpo .pa-foto{margin:1.25rem 0 0}
.scheda-corpo .pa-foto img{max-width:100%; width:100%; max-height:26rem; object-fit:cover}
.scheda-corpo .pa-foto figcaption{font-size:.9rem; color:var(--grigio); margin-top:.4rem}
.scheda-corpo .info-band{margin-top:1.75rem}
.scheda-corpo .patologie-grid{margin-top:1.25rem; max-width:48rem; grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.scheda-corpo .pa-attrezzi{padding:0; max-width:48rem}
.scheda-corpo .pa-foto{max-width:48rem}

/* etichette "anche a domicilio" / "solo in sede" nelle schede delle terapie */
.etichetta-dove{display:inline-block; margin-top:.5rem; padding:.12rem .55rem; border-radius:999px;
  background:var(--wash); color:var(--verde); font-size:.76rem; font-weight:600}
.etichetta-dove.in-sede{background:#fff; color:var(--grigio); border:1px solid var(--bordo)}

/* ---------- effetti grafici ----------
 * Tutti leggeri e senza contenuto nascosto: se il browser non li supporta,
 * o il visitatore ha chiesto di ridurre le animazioni, la pagina resta com'e'.
 */

/* 1. passaggio morbido da una pagina all'altra (dissolvenza breve);
      l'intestazione resta ferma */
@view-transition{navigation:auto}
::view-transition-old(root), ::view-transition-new(root){animation-duration:.3s}
.header{view-transition-name:testata}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* 2. sezioni che compaiono scorrendo: le classi le mette js/effetti.js solo ai
      blocchi fuori dallo schermo al caricamento, e le toglie a effetto finito */
.fx{opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1)}
.fx.fx-in{opacity:1; transform:none}
.fx .fx-figlio{opacity:0; transform:translateY(14px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.25,1)}
.fx.fx-in .fx-figlio{opacity:1; transform:none; transition-delay:calc(var(--i, 0) * 70ms + 120ms)}
@media print{.fx, .fx .fx-figlio{opacity:1!important; transform:none!important}}

/* 3. le mani del logo nella foto d'apertura della home */
.home-hero-im{position:relative}
.hero-mani{position:absolute; left:1.1rem; bottom:1.1rem; width:7rem; height:7rem;
  padding:1.1rem; box-sizing:border-box; background:rgba(255,255,255,.94); border-radius:50%;
  box-shadow:0 8px 24px rgba(38,48,42,.16); overflow:visible}
.hero-mani path{fill:var(--verde-chiaro); transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  .hero-mani .mano-su{animation:mano-su 1.6s cubic-bezier(.2,.7,.25,1) .25s both}
  .hero-mani .mano-giu{animation:mano-giu 1.6s cubic-bezier(.2,.7,.25,1) .25s both}
}
@keyframes mano-su{from{transform:translate(16%,-14%) rotate(5deg)} to{transform:none}}
@keyframes mano-giu{from{transform:translate(-16%,14%) rotate(5deg)} to{transform:none}}
@media (max-width:640px){.hero-mani{width:5.25rem; height:5.25rem; left:.8rem; bottom:.8rem; padding:.8rem}}

/* 4. divisori tra le sezioni: la linea sottile con un piccolo arco verde,
      ripreso dalla curva del logo, al posto della linea dritta */
.section-cfm{border-top:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12'%3E%3Cpath d='M1 1C10 14 34 14 43 1C33 9 11 9 1 1Z' fill='%2399C564'/%3E%3C/svg%3E") left 1.25rem top 0 / 52px 14px no-repeat,
    linear-gradient(var(--bordo), var(--bordo)) left 0 top 1px / 100% 1px no-repeat}
.section-cfm.senza-divisore{background:none}

/*    riquadri verdi: sfumatura leggera e le mani del logo in filigrana */
body .home-pp, body .reparto, body .contact-panel{
  background:
    url("../images/mani-filigrana.svg") right -2.5rem bottom -2.25rem / 15rem auto no-repeat,
    radial-gradient(130% 120% at 0% 0%, #FAFCF6 0%, var(--wash) 60%, #E9F2DC 100%)}

/* 5. foto della home che si alternano lentamente, con un leggero zoom */
.hero-foto{position:relative; height:var(--h-media); border-radius:18px; overflow:hidden; background:var(--wash)}
.hero-foto img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; display:block;
  opacity:0; transform:scale(1);
  transition:opacity 1.6s ease, transform 0s linear 1.6s}
.hero-foto img.attiva{opacity:1; position:absolute}
.hero-foto.in-moto img.attiva{transform:scale(1.07); transition:opacity 1.6s ease, transform 9s linear}
.hero-pausa{position:absolute; right:.75rem; bottom:.75rem; z-index:2; width:2.4rem; height:2.4rem;
  border:0; border-radius:50%; background:rgba(255,255,255,.88); cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(38,48,42,.18)}
.hero-pausa[hidden]{display:none}
.hero-pausa span{width:12px; height:14px; border-left:4px solid var(--verde); border-right:4px solid var(--verde)}
.hero-pausa.ferma span{width:0; height:0; border-style:solid; border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent var(--verde); margin-left:3px}
.hero-pausa:focus-visible{outline:3px solid var(--verde-chiaro); outline-offset:2px}
.hero-mani{z-index:1}

/* 6. foto ingrandibili con un tocco (js/effetti.js) */
.zoomabile{cursor:zoom-in}
.zoomabile:focus-visible{outline:3px solid var(--verde-chiaro); outline-offset:3px}
.lb{border:0; padding:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none;
  background:rgba(22,27,20,.94); color:#fff; overflow:hidden}
.lb::backdrop{background:rgba(22,27,20,.6)}
.lb[open]{display:flex; flex-direction:column; align-items:center; justify-content:center; animation:lb-in .25s ease}
@keyframes lb-in{from{opacity:0} to{opacity:1}}
.lb-img{max-width:94vw !important; max-height:80dvh; width:auto; height:auto; object-fit:contain; border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.4); user-select:none; -webkit-user-drag:none}
.lb-cap{margin:.9rem 1rem 0; max-width:40rem; text-align:center; font-size:.95rem; line-height:1.4; color:#E8EEE2}
.lb-cap:empty{display:none}
.lb-btn{position:absolute; width:3rem; height:3rem; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.6rem; line-height:1;
  display:flex; align-items:center; justify-content:center}
.lb-btn:hover{background:rgba(255,255,255,.26)}
.lb-btn:focus-visible{outline:3px solid var(--verde-chiaro); outline-offset:2px}
.lb-chiudi{top:max(1rem, env(safe-area-inset-top, 0px)); right:1rem}
.lb-prec{left:1rem; top:50%; transform:translateY(-50%)}
.lb-succ{right:1rem; top:50%; transform:translateY(-50%)}
.lb-btn[hidden]{display:none}
.lb-conta{position:absolute; top:max(1.6rem, env(safe-area-inset-top, 0px)); left:1.25rem; font-size:.85rem; color:#C9D3C0}
@media (max-width:640px){
  .lb-prec, .lb-succ{top:auto; bottom:max(1rem, env(safe-area-inset-bottom, 0px)); transform:none}
  .lb-img{max-height:72dvh}
}

/* pulsanti per prenotare in testa alle schede di medici e fisioterapisti */
.scheda-prenota{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.1rem 0 0}
@media (max-width:640px){.scheda-prenota .btn-cfm{flex:1 1 auto; text-align:center}}

/* ---------- intestazione su computer: logo a sinistra, menu su una riga,
   pulsante Prenota, voce della sezione corrente evidenziata ---------- */
@media (min-width:769px){
  .header{padding-top:14px; padding-bottom:14px}
  .header > .container > .row{display:flex; flex-wrap:nowrap; align-items:center; margin:0}
  .header #logo{flex:0 0 auto; width:auto; max-width:none; padding:0}
  .header #site-logo{height:3.4rem; width:auto; max-width:none}
  .header .header-destra{flex:1 1 auto; width:auto; max-width:none; display:flex; align-items:center;
    justify-content:flex-end; gap:.75rem; padding-right:0}
  .header .navigation{float:none}
  .header #navigation{left:0 !important; margin:0}
  .header #navigation > ul{display:flex; flex-wrap:nowrap; gap:.15rem}
  .header #navigation > ul > li{float:none; padding:0}
  .header #navigation > ul > li > a{padding:.75rem .7rem; font-size:12px; white-space:nowrap; border-radius:8px;
    background:transparent; color:var(--ink); transition:background .2s, color .2s}
  .header #navigation > ul > li:hover > a{background:var(--wash); color:var(--verde)}
  .header #navigation > ul > li.corrente > a{color:var(--verde); box-shadow:inset 0 -2px 0 var(--verde-chiaro); border-radius:0}
  .header-prenota{white-space:nowrap; padding:.6rem 1.15rem}
}
@media (min-width:769px) and (max-width:1100px){
  .header #site-logo{height:2.8rem}
  .header #navigation > ul > li > a{padding:.7rem .45rem; font-size:11.5px}
}
@media (min-width:769px) and (max-width:1199px){ .header > .container{max-width:none} }
@media (min-width:769px) and (max-width:1100px){ .header-prenota{display:none} }
@media (max-width:768px){
  .header-prenota{display:none}
  #navigation.small-screen ul li.corrente > a{color:var(--verde)}
}
@media (min-width:769px) and (max-width:900px){
  .header #site-logo{height:2.2rem}
  .header #navigation > ul > li > a{padding:.65rem .32rem; font-size:10.8px; letter-spacing:.02em}
}

/* ---------- prenotazioni online ----------
   Si accendono in inc/layout.php (CFEM_PRENOTA_ATTIVA): finche' sono spente
   queste regole non trovano niente da colorare. Il pulsante porta alla web
   app; sotto, piu' piccola, la seconda strada per chi non trova un orario. */
.btn-prenota{white-space:nowrap}
.btn-prenota-grande{font-size:1.08rem; padding:.95rem 1.9rem}
.prenota-online{margin:1.1rem 0 0}
.callout-cfm .prenota-online{margin-top:0}
.richiamo{margin-top:1.1rem; font-size:.95rem; color:var(--grigio)}
.richiamo-tit{font-weight:600; color:var(--ink); margin:0 0 .35rem; font-size:.98rem}
.richiamo-voci{list-style:none; margin:0; padding:0; display:grid; gap:.3rem}
.richiamo-voci li{margin:0; padding:0}
.richiamo-voci li::before{content:none}
.richiamo-et{display:inline-block; min-width:10.5rem; font-weight:600; color:var(--grigio)}
.richiamo-voci a{color:var(--verde); font-weight:600; text-decoration:underline; text-decoration-color:var(--bordo);
  text-underline-offset:3px; white-space:nowrap}
.richiamo-voci a:hover{text-decoration-color:var(--verde)}
.richiamo-sep{color:#b9b9ad; margin:0 .2rem}
.prenota-online + p{margin-top:1.25rem}
.home-prenota{margin:0 0 .2rem}
.home-hero .richiamo{max-width:34rem}
.ct-online{margin:0 0 1.5rem}
@media (max-width:640px){
  .richiamo-et{display:block; min-width:0}
  /* niente puntino: se le due voci vanno a capo resterebbe appeso a fine riga */
  .richiamo-sep{display:none}
  .richiamo-voci a{display:inline-block; margin-right:.9rem}
  .home-prenota .btn-prenota-grande, .ct-online .btn-prenota-grande{display:block; text-align:center}
}
/* intestazione su computer: il pulsante c'e' a ogni larghezza; fra 769 e 1199
   pixel gli fa posto la voce Home, che porta gia' il logo */
@media (min-width:769px) and (max-width:1199px){
  .header-prenota-online{display:inline-block; padding:.55rem .85rem; font-size:.88rem}
  .con-prenota .header #navigation > ul > li:first-child{display:none}
}
/* tablet in verticale (769-899 pixel): in una riga sola non ci sta tutto, quindi
   logo e pulsante sopra, il menu intero sotto */
@media (min-width:769px) and (max-width:899px){
  .con-prenota .header > .container > .row{flex-wrap:wrap; row-gap:.35rem}
  .con-prenota .header .header-destra{display:contents}
  .con-prenota .header #logo{order:1}
  .con-prenota .header .header-prenota-online{order:2; margin-left:auto}
  .con-prenota .header .navigation{order:3; flex:1 1 100%}
  .con-prenota .header #site-logo{height:2.8rem}
  .con-prenota .header #navigation, .con-prenota .header #navigation > ul{width:100%}
  .con-prenota .header #navigation > ul{justify-content:space-between}
  .con-prenota .header #navigation > ul::after{content:none}
  .con-prenota .header #navigation > ul > li:first-child{display:block}
  .con-prenota .header #navigation > ul > li > a{font-size:11.5px; padding:.55rem .4rem}
}
/* telefono: il pulsante sta nella riga di Menu, senza bisogno di aprirlo */
@media (max-width:768px){
  .con-prenota .header .header-destra{position:relative}
  .header-prenota-online{display:inline-block; position:absolute; left:12px; top:13px; z-index:2;
    padding:.55rem .9rem; font-size:.88rem}
  .con-prenota #navigation.small-screen #menu-button{text-align:right; padding-right:42px}
  /* la barra in fondo resta per chiamare o scrivere, ma bianca: il verde pieno
     e' del pulsante Prenota online, che e' la strada principale */
  .con-prenota .barra-mobile .barra-tel,
  .con-prenota .barra-scelta summary{background:#fff; color:var(--verde); border:1.5px solid var(--bordo)}
}
/* e la riga resta sempre a portata: il logo scorre via, l'intestazione si
   ferma 90 pixel sopra il bordo (logo alto 50 piu' i 40 di margine sopra) */
@media (max-width:767px){
  .con-prenota #site-logo{height:50px; width:auto; max-width:none}
  .con-prenota .header{position:sticky; top:-90px; z-index:100; padding-bottom:6px}
  .con-prenota section[id], .con-prenota header[id], .con-prenota div[id], .con-prenota h2[id]{scroll-margin-top:5rem}
}
@media (min-width:768px) and (max-width:768px){
  .con-prenota .header{position:sticky; top:0; z-index:100}
}

/* ---------- barra di contatto fissa in fondo, solo su telefono ---------- */
.barra-mobile{display:none}
@media (max-width:768px){
  body{padding-bottom:calc(4.4rem + env(safe-area-inset-bottom, 0px))}
  .barra-mobile{display:flex; align-items:center; gap:.5rem; position:fixed; left:0; right:0; bottom:0; z-index:200;
    background:#fff; border-top:1px solid var(--bordo); box-shadow:0 -6px 18px rgba(38,48,42,.08);
    padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px))}
  .barra-mobile .barra-et{flex:1 1 auto; min-width:0; font-size:.72rem; line-height:1.2; color:var(--grigio)}
  .barra-mobile .barra-et b{display:block; font-size:.92rem; color:var(--ink); white-space:nowrap}
  .barra-mobile a{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:44px;
    padding:0 1.05rem; border-radius:10px; font-weight:700; font-size:.95rem; text-decoration:none}
  .barra-mobile .barra-tel{background:var(--verde); color:#fff}
  .barra-mobile .barra-wa{background:#fff; color:#1d7a46; border:1.5px solid #9fd4b4}
  /* pagine generali: un pulsante che apre i tre servizi */
  .barra-scelta{display:block; padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px))}
  .barra-scelta details{width:100%}
  .barra-scelta summary{list-style:none; cursor:pointer; min-height:46px; display:flex; align-items:center;
    justify-content:center; border-radius:10px; background:var(--verde); color:#fff; font-weight:700; font-size:.98rem}
  .barra-scelta summary::-webkit-details-marker{display:none}
  .barra-scelta details[open] summary{background:#fff; color:var(--verde); border:1.5px solid var(--bordo)}
  .barra-scelta details[open] summary::after{content:"  \00d7"; font-weight:400}
  .barra-elenco{display:grid; gap:.45rem; padding:.2rem 0 .6rem}
  .barra-voce{display:flex; align-items:center; gap:.5rem; padding:.45rem .2rem; border-bottom:1px solid var(--bordo)}
  .barra-voce:last-child{border-bottom:0}
  .barra-scelta details[open]{display:flex; flex-direction:column-reverse}
  .lb[open] ~ .barra-mobile, body:has(.lb[open]) .barra-mobile{display:none}
}
@media print{ .barra-mobile{display:none !important} body{padding-bottom:0} }

/* ---------- home: il team, una fila di volti che portano alle schede ---------- */
.team-volti{list-style:none; margin:1.5rem 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(6.4rem,1fr)); gap:1.1rem .6rem}
.team-volti a{display:flex; flex-direction:column; align-items:center; gap:.45rem; text-decoration:none; color:var(--ink)}
.team-volti img{width:5.2rem; height:5.2rem; border-radius:50%; object-fit:cover; display:block;
  box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--bordo); transition:transform .2s, box-shadow .2s}
.team-volti a:hover img, .team-volti a:focus-visible img{transform:translateY(-2px); box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--verde-chiaro)}
.team-nome{font-size:.78rem; line-height:1.25; text-align:center; color:var(--grigio)}
.team-volti a:hover .team-nome{color:var(--verde)}
@media (max-width:640px){
  .team-volti{grid-template-columns:repeat(4,1fr); gap:.9rem .4rem}
  .team-volti img{width:4.3rem; height:4.3rem}
  .team-nome{font-size:.7rem}
}

/* ============================================================
   L'APP PER PRENOTARE (solo con CFEM_PRENOTA_ATTIVA = true)
   Barra in cima a ogni pagina e sezione in home: invitano a
   installare la web app delle prenotazioni sul telefono.
   ============================================================ */
.avviso-app{background:var(--verde); color:#fff}
.avviso-app-in{display:flex; align-items:center; gap:.85rem; padding-top:.6rem; padding-bottom:.6rem}
.avviso-app-icona{flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:#fff; display:block}
.avviso-app-testo{flex:1 1 auto; margin:0; font-size:1rem; line-height:1.35; color:#fff}
.avviso-app-testo strong{font-weight:700}
a.avviso-app-btn,
button.avviso-app-btn{flex:0 0 auto; background:#fff; color:var(--verde); font-weight:700;
  text-decoration:none; padding:.55rem 1.15rem; border-radius:999px; white-space:nowrap;
  border:none; cursor:pointer; font-size:inherit; font-family:inherit; line-height:inherit}
a.avviso-app-btn:hover,
button.avviso-app-btn:hover{background:var(--wash); color:var(--verde-hover)}
a.avviso-app-btn:focus-visible,
button.avviso-app-btn:focus-visible{outline:3px solid #fff; outline-offset:2px}
@media (max-width:640px){
  .avviso-app-piu{display:none}
  .avviso-app-in{gap:.65rem}
  .avviso-app-testo{font-size:.9rem}
  .avviso-app-icona{width:34px; height:34px; border-radius:8px}
  a.avviso-app-btn,
  button.avviso-app-btn{padding:.5rem .9rem; font-size:.9rem}
}

.home-app-in{display:flex; align-items:center; justify-content:space-between; gap:2.5rem;
  background:var(--wash); border:1px solid var(--bordo); border-radius:18px; padding:1.8rem 2.1rem}
.home-app h2{display:flex; align-items:center; gap:.75rem}
.home-app-icona{flex:0 0 auto; width:48px; height:48px; border-radius:12px; background:#fff;
  border:1px solid var(--bordo); display:block}
.home-app-passi{margin:1.1rem 0 1.4rem; padding-left:1.4rem; display:grid; gap:.55rem; max-width:62ch}
.home-app-passi strong{color:var(--ink)}
.home-app-azioni{margin:0}
.home-app-nota{margin:.85rem 0 0; color:var(--grigio); font-size:.93rem; max-width:62ch}
.home-app-qr{flex:0 0 auto; margin:0; text-align:center}
.home-app-qr img{display:block; width:164px; height:164px; padding:8px; background:#fff;
  border:1px solid var(--bordo); border-radius:12px; box-sizing:content-box}
.home-app-qr figcaption{margin-top:.55rem; font-size:.85rem; color:var(--grigio); max-width:11rem}
@media (max-width:760px){
  .home-app-qr, .home-app-largo{display:none}
  .home-app-in{padding:1.3rem 1.1rem}
  .home-app h2{align-items:flex-start}
  .home-app-azioni .btn-prenota-grande{display:block; text-align:center}
}

/* Popup "Prenota dal telefono" =========================================== */
.prenota-popup{position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  z-index:9000; padding:1rem}
.prenota-popup[hidden]{display:none}
.prenota-popup-in{background:#fff; border-radius:16px; padding:2rem 1.8rem;
  width:100%; max-width:520px; position:relative; max-height:90vh; overflow-y:auto;
  box-shadow:0 8px 40px rgba(0,0,0,.22)}
.prenota-popup-chiudi{position:absolute; top:.9rem; right:1rem; background:none;
  border:none; font-size:1.3rem; cursor:pointer; color:var(--grigio);
  padding:.3rem .6rem; line-height:1; border-radius:6px}
.prenota-popup-chiudi:hover{background:var(--wash)}
.prenota-popup-titolo{display:flex; align-items:center; gap:.7rem;
  font-size:1.2rem; margin:0 0 1rem}
.prenota-popup-titolo img{border-radius:10px; flex:0 0 auto}
.prenota-popup-passi{margin:.8rem 0 1.2rem; padding-left:1.3rem;
  display:grid; gap:.5rem}
.prenota-popup-os{margin:0; padding:0; list-style:none}
.prenota-popup-azioni{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap}
.prenota-popup-qr{margin:0; text-align:center; flex:0 0 auto}
.prenota-popup-qr img{display:block; padding:6px; background:#fff;
  border:1px solid var(--bordo); border-radius:10px}
.prenota-popup-qr figcaption{margin-top:.4rem; font-size:.8rem; color:var(--grigio)}
@media (max-width:480px){
  .prenota-popup-in{padding:1.5rem 1.2rem}
  .prenota-popup-qr{display:none}
}