/* ==========================================================================
   Terme di Roma — design system "Pietra e Acqua" (famiglia Victoria)
   adattato al brand Terme di Roma. UNICO punto di modifica grafica.
   ========================================================================== */
:root{
  /* Travertino di Tivoli: la pietra che nasce dal deposito di queste stesse acque.
     calce = il tono più chiaro della pietra tagliata di fresco
     sabbia = travertino chiaro, fondo delle fasce
     pietra = travertino medio, bordi e linee
     venatura = la riga più scura che corre nel blocco */
  --carta:#fffdf9; --calce:#f4efe4; --sabbia:#ece5d6; --pietra:#d9cdb6; --venatura:#b9a889;
  --petrolio:#0b6577; --petrolio-scuro:#083c4a; --acqua:#7db4bc;
  --oro-testo:#6a562b; --inchiostro:#2b2b28; --grigio:#5c574f; --oro:#a8905c;
  --serif:'Cormorant Garamond',serif; --sans:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--inchiostro);background:var(--carta);font-weight:400;line-height:1.7}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--oro-testo);font-weight:600;margin-bottom:14px}
.btn{display:inline-block;padding:15px 34px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;transition:.3s;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--petrolio);color:#fff}
.btn-primary:hover{background:var(--petrolio-scuro)}
.btn-ghost{border-color:#fff;color:#fff}
.btn-ghost:hover{background:#fff;color:var(--inchiostro)}
.btn-outline{border-color:var(--petrolio);color:var(--petrolio)}
.btn-outline:hover{background:var(--petrolio);color:#fff}

/* badge prototipo e blocchi in attesa di contenuti definitivi (Fase 4) */
.proto{position:fixed;bottom:16px;left:16px;z-index:99;background:var(--inchiostro);color:#fff;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;padding:8px 14px;opacity:.85}
.segnaposto{border:2px dashed var(--acqua);background:rgba(125,180,188,.08);padding:14px 18px;font-size:.85rem;color:var(--grigio)}

/* topbar */
.topbar{background:var(--petrolio-scuro);color:#e9e4d8;font-size:.75rem;padding:8px 0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center}
.topbar a:hover{color:#fff}
.topbar .lang span{opacity:.5;margin:0 4px}
.topbar .lang b{font-weight:600}

/* nav */
nav.principale{position:sticky;top:0;z-index:50;background:rgba(255,253,249,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--pietra);transition:.3s}
nav.principale .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{font-family:var(--serif);font-size:1.5rem;letter-spacing:.06em;color:var(--petrolio-scuro)}
.logo small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.42em;text-transform:uppercase;color:var(--oro-testo);margin-top:2px}
.menu{display:flex;gap:26px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.menu a{padding:6px 0;border-bottom:1px solid transparent}
.menu a:hover,.menu a.attiva{border-color:var(--oro);color:var(--petrolio)}
.nav-cta{background:var(--petrolio);color:#fff;padding:12px 24px;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}
.nav-cta:hover{background:var(--petrolio-scuro)}
@media(max-width:1020px){.menu{display:none}}

/* hero home */
.hero{position:relative;height:92vh;min-height:600px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero-foto,none) center/cover;transform:scale(1.03)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,50,60,.35),rgba(8,50,60,.55))}
.hero-inner{position:relative;z-index:2;max-width:840px;padding:0 24px}
.hero .eyebrow{color:#e8dcc0}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:400;margin-bottom:18px}
.hero h1 em{font-style:italic}
.hero p{font-size:1.05rem;font-weight:400;max-width:600px;margin:0 auto 34px;opacity:.92}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* hero pagine interne */
.page-hero{position:relative;min-height:380px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:var(--hero-foto,var(--petrolio-scuro)) center/cover}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,50,60,.25),rgba(8,50,60,.65))}
.page-hero .wrap{position:relative;z-index:2;padding-bottom:44px;width:100%}
.page-hero h1{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:400;max-width:820px}
.page-hero .eyebrow{color:#e8dcc0}

/* breadcrumb */
.crumbs{background:var(--sabbia);border-bottom:1px solid var(--pietra);font-size:.75rem;letter-spacing:.06em;padding:12px 0;color:var(--grigio)}
.crumbs a:hover{color:var(--petrolio)}
.crumbs span{margin:0 8px;opacity:.5}

/* barra sotto hero */
.booking{position:relative;z-index:5;margin-top:-52px}
.booking-box{background:#fff;box-shadow:0 24px 60px rgba(40,60,65,.14);display:grid;grid-template-columns:1fr 1fr 1fr auto;max-width:980px;margin:0 auto}
.b-field{padding:22px 28px;border-right:1px solid var(--pietra)}
.b-field label{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grigio);margin-bottom:6px}
.b-field span{font-size:.95rem;font-weight:400}
.b-go{background:var(--petrolio);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;padding:0 42px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.b-go:hover{background:var(--petrolio-scuro)}
@media(max-width:860px){.booking-box{grid-template-columns:1fr 1fr}.b-go{grid-column:1/-1;justify-content:center;padding:18px}}

/* usp strip */
.usp{padding:64px 0 8px}
.usp .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.usp h3,.usp .usp-titolo{font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin:10px 0 4px;color:var(--petrolio-scuro)}
.usp p{font-size:.85rem;color:var(--grigio)}
.usp .ico{font-size:1.5rem;color:var(--oro)}
@media(max-width:860px){.usp .wrap{grid-template-columns:1fr 1fr;gap:32px 20px}}

/* intro + numeri */
.intro{padding:90px 0 70px;text-align:center}
.intro h2{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:760px;margin:0 auto 22px}
.intro p{max-width:660px;margin:0 auto;color:var(--grigio)}
.numbers{display:flex;justify-content:center;gap:70px;margin-top:54px;flex-wrap:wrap}
.numbers b{display:block;font-family:var(--serif);font-size:2.6rem;font-weight:600;color:var(--petrolio)}
.numbers span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grigio)}

/* sezioni */
section.block{padding:84px 0}
.block.tinted{background:var(--sabbia)}
.sec-head{text-align:center;max-width:640px;margin:0 auto 52px}
.sec-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:14px}
.sec-head p{color:var(--grigio)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:28px}
.card{background:#fff;border:1px solid var(--pietra)}
.card .ph{height:250px;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:.6s}
.card:hover .ph img{transform:scale(1.05)}
.card .bd{padding:26px}
.card h3{font-size:1.35rem;margin-bottom:8px}
.card p{font-size:.88rem;color:var(--grigio);margin-bottom:16px}
.card a{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--petrolio);border-bottom:1px solid var(--oro);padding-bottom:3px}
@media(max-width:860px){.cards{grid-template-columns:1fr}}

/* split immagine/testo */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:stretch}
.split .im{min-height:480px;background-size:cover;background-position:center}
.split .tx{background:var(--petrolio-scuro);color:#eee7d8;padding:70px 60px;display:flex;flex-direction:column;justify-content:center}
.split .tx .eyebrow{color:var(--acqua)}
.split .tx h2{font-size:clamp(1.8rem,3vw,2.5rem);color:#fff;margin-bottom:18px}
.split .tx p{font-size:.95rem;opacity:.85;margin-bottom:26px}
@media(max-width:860px){.split{grid-template-columns:1fr}.split .im{min-height:320px}.split .tx{padding:48px 30px}}

/* fascia fotografica */
.band{position:relative;padding:130px 0;color:#fff;text-align:center;background:var(--hero-foto,var(--petrolio-scuro)) center/cover fixed}
.band::before{content:"";position:absolute;inset:0;background:rgba(8,44,54,.55)}
.band .wrap{position:relative}
.band h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:14px}
.band p{max-width:560px;margin:0 auto 30px;opacity:.92}

/* blocco cure SSN a passaggi */
.ssn{font-size:1.06rem}
.ssn .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ssn-card{background:#fff;border:1px solid var(--pietra);padding:38px}
.ssn-card h3{font-size:1.5rem;margin-bottom:18px;color:var(--petrolio-scuro)}
.ssn-card ol{list-style:none;counter-reset:step}
.ssn-card li{counter-increment:step;display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--pietra);font-size:1.02rem}
.ssn-card li:last-child{border:none}
.ssn-card li::before{content:counter(step);flex:0 0 32px;height:32px;border-radius:50%;background:var(--sabbia);color:var(--petrolio);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.ssn .note{background:var(--sabbia);padding:14px 18px;font-size:.9rem;color:var(--grigio);margin-top:20px;border-left:3px solid var(--oro)}
@media(max-width:860px){.ssn .grid{grid-template-columns:1fr}}

/* offerte */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.offer{position:relative;height:380px;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.offer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.6s}
.offer:hover img{transform:scale(1.05)}
.offer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(8,40,50,.85))}
.offer .bd{position:relative;z-index:2;padding:28px}
.offer .tag{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;background:var(--oro);color:#fff;padding:5px 10px;display:inline-block;margin-bottom:10px}
.offer h3{font-size:1.4rem;margin-bottom:4px}
.offer p{font-size:.85rem;opacity:.9}
@media(max-width:860px){.offers{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--pietra)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:22px 4px;font-weight:400;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;color:var(--oro)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 4px 22px;color:var(--grigio);font-size:.93rem;max-width:680px}

/* prosa pagine interne */
.prose{max-width:820px;margin:0 auto}
.prose h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:48px 0 16px;color:var(--petrolio-scuro)}
.prose h3{font-size:1.3rem;margin:32px 0 10px;color:var(--petrolio-scuro)}
.prose p{margin-bottom:16px}
.prose ul{margin:0 0 16px 22px}
.prose li{margin-bottom:6px}
.prose .nota{background:var(--sabbia);padding:14px 18px;font-size:.9rem;color:var(--grigio);border-left:3px solid var(--oro);margin:20px 0}

/* tabelle (patologie/cure, listini) */
.tabella{width:100%;border-collapse:collapse;margin:24px 0;background:#fff}
.tabella th{background:var(--petrolio-scuro);color:#fff;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-align:left;padding:14px 16px}
.tabella td{border:1px solid var(--pietra);padding:14px 16px;vertical-align:top;font-size:.95rem}
.tabella tr:nth-child(even) td{background:var(--sabbia)}
.tabella .si{color:#1e7d32;font-weight:600}
.tabella .no{color:#b3261e;font-weight:600}
.scroll-x{overflow-x:auto}

/* ALTA LEGGIBILITÀ — sezioni cure per pubblico senior */
.leggibile{font-size:1.13rem;line-height:1.85}
.leggibile .prose p,.leggibile .prose li{font-size:1.13rem}
.leggibile .faq summary{font-size:1.15rem}
.leggibile .faq .a{font-size:1.05rem}
.leggibile .tabella td{font-size:1.02rem}

/* footer */
footer{background:var(--petrolio-scuro);color:#cfc9ba;font-size:.85rem}
.f-cta{background:var(--petrolio);text-align:center;padding:64px 24px;color:#fff}
.f-cta h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:10px}
.f-cta p{opacity:.85;margin-bottom:26px}
.f-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:64px 0}
.f-main h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.f-main a{display:block;padding:4px 0}
.f-main a:hover{color:#fff}
.f-brand .logo{color:#fff;margin-bottom:14px}
.f-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;font-size:.72rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:860px){.f-main{grid-template-columns:1fr 1fr}}

/* Su schermi stretti gli sfondi a tutta larghezza usano la variante ridotta:
   stessa resa, file molto più leggero (aggiunta 16/09/2026). */
@media (max-width:900px){
  .hero::before,.page-hero::before{background-image:var(--hero-foto-s,var(--hero-foto))}
  .band{background-image:var(--hero-foto-s,var(--hero-foto));background-attachment:scroll}
}
/* Schermi medi (portatili, 901-1440 px): variante da 1280 px invece
   dell'originale da ~1900 px. Risparmia in media un terzo del peso della
   fotografia piu' grande della pagina (aggiunta 16/09/2026). */
@media (min-width:901px) and (max-width:1440px){
  .hero::before,.page-hero::before{background-image:var(--hero-foto-m,var(--hero-foto))}
  .band{background-image:var(--hero-foto-m,var(--hero-foto))}
}

/* Telefoni stretti (fino a 520 px): i pulsanti in maiuscoletto con molta
   spaziatura fra le lettere restavano più larghi dello schermo e spingevano
   fuori tutta la colonna centrale. Qui si accorciano e possono andare a capo.
   Correzione del 16/09/2026. */
@media(max-width:520px){
  .btn{padding:14px 20px;letter-spacing:.1em;font-size:.72rem;white-space:normal;text-align:center}
  .hero-ctas{width:100%}
  .hero-ctas .btn{flex:1 1 100%}
  .hero-inner,.wrap{padding-left:16px;padding-right:16px}
  .hero .eyebrow{letter-spacing:.16em;font-size:.66rem}
}

/* Colonne che non sfondano lo schermo.
   In una griglia CSS una colonna "1fr" non scende mai sotto la larghezza naturale
   del suo contenuto: una foto da 1903 px teneva la colonna larga 767 px anche su
   un telefono da 390 px, spingendo fuori mezza pagina (pagina Medicina).
   min-width:0 toglie quel vincolo e lascia che la colonna si stringa davvero.
   Correzione del 16/09/2026. */
.grid > *, .offers > *, .cards > *, .split > *, .booking-box > *, .f-main > * { min-width: 0; }

/* Tabelle su telefono: celle più strette, così il listino sta nello schermo;
   se una tabella resta comunque larga, scorre da sola invece di allargare la pagina. */
@media(max-width:520px){
  .tabella th,.tabella td{padding:10px 8px;font-size:.9rem}
  .tabella-scorrevole{overflow-x:auto}
}

/* Elenco numerato "In tre passi" (pagina Medicina).
   Era costruito con flex: ogni pezzo della frase (testo, parole in grassetto)
   diventava un blocco affiancato e la riga non andava mai a capo, sfondando lo
   schermo del telefono. Qui il numero torna un cerchietto ancorato a sinistra e
   il testo scorre normalmente su più righe. Resa identica su desktop.
   Correzione del 16/09/2026. */
.ssn-card li{display:block;position:relative;padding-left:48px}
.ssn-card li::before{position:absolute;left:0;top:12px;width:32px;flex:none}

/* Sfondi scritti nello stile in riga: su telefono si usa la variante ridotta
   dichiarata accanto (--bg-s). Aggiunta 16/09/2026. */
@media(max-width:900px){[style*="--bg-s"]{background-image:var(--bg-s)!important}}

/* Il grassetto usa lo spessore 600, l'unico disponibile come file vero. */
strong,b{font-weight:600}

/* --- approfondimenti: il contenuto esteso recuperato dal vecchio sito --- */
.approfondimento .prose h2 { margin-top: 56px; }
.approfondimento .prose h2:first-child { margin-top: 0; }
.approfondimento .prose h3 { color: var(--petrolio); }
.approfondimento .prose ol { margin: 0 0 18px 1.3rem; }
.approfondimento .prose ol li { padding: 7px 0; }
.approfondimento .prose ul { margin: 0 0 18px 1.2rem; }
.approfondimento .prose ul li { padding: 4px 0; }
/* Il "sì" della colonna convenzione è l'informazione che si cerca a colpo d'occhio. */
.tabella .si { color: #1e6b33; font-weight: 600; text-align: center; }
.tabella-scorrevole { overflow-x: auto; margin: 24px 0; }
/* Recapiti in coda a una sezione: staccati dal testo, non un paragrafo qualsiasi. */
.nota-contatto {
  background: var(--sabbia); border-left: 3px solid var(--oro);
  padding: 14px 18px; font-size: .95rem; margin: 24px 0 0;
}

/* --- segni di colore: rompono la sequenza uniforme di testo su fondo chiaro
       nelle pagine lunghe, senza cambiare l'impianto (richiesta del 16/09) --- */

/* Filetto d'oro sotto i titoli di sezione: dà il ritmo alla lettura e segna
   dove comincia un argomento nuovo. */
.approfondimento .prose h2 { position: relative; padding-top: 22px; }
.approfondimento .prose h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 54px; height: 3px; background: var(--oro);
}

/* Primo paragrafo di ogni approfondimento in corpo maggiore: apre il testo
   come farebbe un occhiello di giornale. */
.approfondimento .prose > p:first-of-type { font-size: 1.1rem; color: var(--inchiostro); }

/* Gli importi in euro dentro il testo restano leggibili come cifre e non si
   confondono con le parole. */
.approfondimento .prose strong { color: var(--petrolio-scuro); }

/* Elenchi puntati: il segno è un trattino d'oro, non un pallino grigio. */
.approfondimento .prose ul { list-style: none; margin-left: 0; }
.approfondimento .prose ul li { position: relative; padding-left: 1.4rem; }
.approfondimento .prose ul li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 12px; height: 2px; background: var(--oro);
}

/* Elenchi numerati (le procedure: come si accede alla cura): il numero è un
   cerchietto pieno, così i passi si contano a colpo d'occhio. */
.approfondimento .prose ol { list-style: none; counter-reset: passo; margin-left: 0; }
.approfondimento .prose ol li { position: relative; padding-left: 2.6rem; counter-increment: passo; }
.approfondimento .prose ol li::before {
  content: counter(passo);
  position: absolute; left: 0; top: .35em;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--petrolio); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
}

/* Fascia di approfondimento a fondo alternato nelle pagine di sezione:
   spezza il blocco unico di testo. */
.block.approfondimento:nth-of-type(even) { background: var(--sabbia); }

/* --- rassegna stampa: data a sinistra, notizia a destra, una riga per uscita --- */
.rassegna { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.rassegna li {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1.6rem;
  padding: 22px 0; border-top: 1px solid var(--pietra);
}
.rassegna li:last-child { border-bottom: 1px solid var(--pietra); }
.rassegna .data {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--oro-testo); font-weight: 600; padding-top: .3rem;
}
.rassegna h3 { font-size: 1.15rem; margin: 0 0 .3rem; color: var(--petrolio-scuro); }
.rassegna .testata { font-size: .92rem; color: var(--grigio); margin: 0 0 .4rem; }
.rassegna a { color: var(--petrolio); font-size: .92rem; }
@media(max-width:600px){ .rassegna li { grid-template-columns: 1fr; gap: .4rem; } }

/* --- travertino: le sfumature della pietra nelle fasce e nei segni --------- */

/* Le fasce chiare non sono più di un colore solo: una velatura che scende dal
   tono di calce a quello di sabbia, come il taglio di un blocco. */
.block.tinted {
  background: linear-gradient(180deg, var(--calce) 0%, var(--sabbia) 100%);
}

/* Riga di venatura in cima alle fasce: un solo tratto, come una fuga fra due lastre. */
.block.tinted { border-top: 1px solid var(--venatura); }

/* Le schede riprendono la pietra nel bordo, non un grigio qualsiasi. */
.voce-card, .card, .ssn-card { border-color: var(--pietra); }

/* Copertina delle schede: la velatura corre in orizzontale, così il blocco di
   testo si stacca dalla fotografia che gli sta accanto. */
.testa-scheda {
  background: linear-gradient(105deg, var(--calce) 0%, var(--sabbia) 62%, var(--pietra) 100%);
  border-bottom: 1px solid var(--venatura);
}

/* Striscia delle briciole: tono di calce e fughe sopra e sotto. */
.crumbs { background: var(--calce); border-top: 1px solid var(--venatura); border-bottom: 1px solid var(--venatura); }

/* Tabelle: righe alterne nel tono della pietra chiara. */
.tabella tr:nth-child(even) td { background: var(--calce); }
.tabella td { border-color: var(--pietra); }

/* Note e richiami: fondo di calce, filetto d'oro. */
.nota-contatto, .nota-ssn, .ssn { background: var(--calce); border-left-color: var(--oro); }

/* Riga prezzo e durata sotto il nome del trattamento: si legge come un dato,
   non come una frase. */
.riga-listino {
  font-family: var(--sans); font-size: .85rem; font-weight: 600;
  letter-spacing: .04em; color: var(--petrolio);
  margin: -6px 0 10px; font-variant-numeric: tabular-nums;
}

/* --- copertina delle pagine di sezione: testo e foto affiancati -------------
   Come nelle schede. La fascia a tutta larghezza tagliava le fotografie e
   obbligava a sceglierle per forma invece che per argomento. */
.testa-sezione {
  background: linear-gradient(105deg, var(--calce) 0%, var(--sabbia) 62%, var(--pietra) 100%);
  border-bottom: 1px solid var(--venatura);
}
.testa-sezione .wrap {
  display: grid; grid-template-columns: 1fr 42%; gap: 0 3.5rem;
  align-items: center; min-height: 24rem;
  max-width: 1200px; margin: 0 auto; padding: 3.2rem 24px;
}
.testa-sezione .testa-testo { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.testa-sezione h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); margin: 0; color: var(--petrolio-scuro); }
.testa-sezione .risposta-diretta { font-size: 1.08rem; line-height: 1.7; margin: 0; max-width: 46ch; }
/* Firma e data degli articoli del blog (28/09/2026) */
.testa-sezione .firma-articolo { margin: 0; font-size: .85rem; letter-spacing: .04em; color: var(--grigio, #6d685e); }
.fonti-articolo li { font-size: .92rem; }
.testa-sezione .testa-foto { min-width: 0; }
.testa-sezione .testa-foto img {
  width: 100%; height: 100%; max-height: 20rem;
  object-fit: cover; display: block;
  box-shadow: 0 18px 44px rgba(8,44,54,.18);
}
@media (max-width: 860px) {
  .testa-sezione .wrap { grid-template-columns: 1fr; gap: 1.8rem; min-height: 0; padding: 2rem 20px 2.4rem; }
  .testa-sezione .testa-foto { order: -1; }
  .testa-sezione .testa-foto img { max-height: 13rem; }
}

/* La formula da far scrivere sull'impegnativa: è testo che il paziente deve
   riportare al medico, quindi si stacca dal discorso come una citazione. */
.impegnativa {
  margin: 20px 0; padding: 18px 22px;
  background: #fff; border: 1px solid var(--pietra); border-left: 4px solid var(--petrolio);
  font-family: var(--sans); font-size: .98rem; font-style: italic;
  color: var(--petrolio-scuro);
}
.impegnativa::before { content: "« "; opacity: .5; }
.impegnativa::after { content: " »"; opacity: .5; }
.nota-tariffe { font-size: .92rem; color: var(--grigio); }

/* --- sfondi differiti ------------------------------------------------------
   Gli elementi marcati [data-sfondo-tardi] tengono la fotografia in una
   variabile che il foglio usa solo quando lo script aggiunge .sfondo-pronto,
   cioè quando la sezione sta per entrare nella vista. Finché non arriva,
   la fascia mostra il proprio colore di fondo: non c'è mai un buco bianco. */
[data-sfondo-tardi] { background-color: var(--petrolio-scuro); }
[data-sfondo-tardi].sfondo-pronto,
[data-sfondo-tardi].sfondo-pronto::before { --hero-foto: var(--hero-foto-tardi); --hero-foto-s: var(--hero-foto-s-tardi); }
.hero[data-sfondo-tardi].sfondo-pronto::before,
.page-hero[data-sfondo-tardi].sfondo-pronto::before { background-image: var(--hero-foto-tardi); }
.band[data-sfondo-tardi].sfondo-pronto { background-image: var(--hero-foto-tardi); }
/* I riquadri .im portano la foto in background-image diretto: la variante piccola
   per telefono si chiama --bg-s-tardi (non --bg-s, che una regola piu' in alto
   applicherebbe subito con !important, vanificando il rinvio). */
.split .im[data-sfondo-tardi].sfondo-pronto { background-image: var(--hero-foto-tardi); }
@media (max-width: 900px) {
  .hero[data-sfondo-tardi].sfondo-pronto::before,
  .page-hero[data-sfondo-tardi].sfondo-pronto::before { background-image: var(--hero-foto-s-tardi, var(--hero-foto-tardi)); }
  .band[data-sfondo-tardi].sfondo-pronto { background-image: var(--hero-foto-s-tardi, var(--hero-foto-tardi)); }
  .split .im[data-sfondo-tardi].sfondo-pronto { background-image: var(--bg-s-tardi, var(--hero-foto-tardi)); }
}
@media (min-width: 901px) and (max-width: 1440px) {
  .hero[data-sfondo-tardi].sfondo-pronto::before,
  .page-hero[data-sfondo-tardi].sfondo-pronto::before { background-image: var(--hero-foto-m-tardi, var(--hero-foto-tardi)); }
  .band[data-sfondo-tardi].sfondo-pronto { background-image: var(--hero-foto-m-tardi, var(--hero-foto-tardi)); }
}
/* Senza JavaScript gli sfondi si vedono lo stesso. */
.senza-script [data-sfondo-tardi] { --hero-foto: var(--hero-foto-tardi); --hero-foto-s: var(--hero-foto-s-tardi); }
.senza-script .split .im[data-sfondo-tardi] { background-image: var(--hero-foto-tardi); }
@media (max-width: 900px) {
  .senza-script .split .im[data-sfondo-tardi] { background-image: var(--bg-s-tardi, var(--hero-foto-tardi)); }
}

/* --- riquadri di navigazione dentro una pagina -----------------------------
   Stesso disegno delle schede di sezione (Cure termali), ma utilizzabile nei
   frammenti statici: lì gli stili del componente non arrivano, perché Astro li
   limita al proprio file. Servono alla pagina Fisioterapia, dove le otto
   tipologie di trattamento vivono nella stessa pagina e i riquadri portano al
   punto giusto invece che a una pagina nuova. Aggiunta del 16/09/2026. */
.elenco-riquadri {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 22px; margin-top: 40px;
}
.riquadro {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid var(--pietra); border-radius: 14px; padding: 24px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.riquadro:hover, .riquadro:focus-visible {
  box-shadow: 0 16px 40px rgba(11, 101, 119, .13); transform: translateY(-3px);
}
.riquadro .numero {
  display: inline-block; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--oro-testo, #6a562b); margin-bottom: 8px;
}
.riquadro h3 { font-size: 1.2rem; margin: 0 0 10px; color: var(--petrolio-scuro, #083c4a); }
.riquadro p { font-size: .94rem; color: var(--grigio, #6d685e); margin: 0; }
@media (max-width: 520px) { .riquadro { padding: 20px; } }

/* Fascia di richiamo: prenotazione e valutazione gratuita. */
.richiamo-prenota {
  border: 1px solid var(--pietra); border-left: 4px solid var(--petrolio-scuro, #083c4a);
  border-radius: 12px; padding: 24px 26px; background: var(--calce, #f4efe4);
}
.richiamo-prenota h2, .richiamo-prenota h3 { margin-top: 0; }
.richiamo-prenota p:last-child { margin-bottom: 0; }

/* Il titolo di ogni tipologia scende sotto la barra fissa quando ci si arriva
   da un riquadro. */
.tipologia { scroll-margin-top: 90px; }

/* Mappa dei contatti: l'iframe parte solo dopo il consenso (banner cookie),
   quindi il riquadro deve reggere anche da vuoto. Aggiunta del 16/09/2026. */
.mappa { border: 1px solid var(--pietra); border-radius: 12px; overflow: hidden; background: var(--sabbia, #ece5d6); min-height: 380px; }
.mappa iframe { display: block; width: 100%; height: 380px; border: 0; }

/* --- schede dei singoli trattamenti ---------------------------------------
   Riproposizione di quello che il sito attuale mostra per ogni trattamento:
   fotografia, prezzo con durata, descrizione e acquisto diretto. Nel sito
   nuovo ne restava la sola riga di listino. Aggiunta del 16/09/2026. */
.schede-trattamenti { display: grid; gap: 28px; margin-top: 32px; }
.scheda-trattamento {
  display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 28px; align-items: start;
  padding-bottom: 28px; border-bottom: 1px solid var(--pietra);
}
.scheda-trattamento:last-child { border-bottom: 0; padding-bottom: 0; }
.scheda-trattamento img {
  width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--pietra);
  aspect-ratio: 16 / 9; object-fit: cover;
}
.scheda-trattamento .testo > :first-child { margin-top: 0; }
.scheda-trattamento h3 { margin: 0 0 6px; }
.scheda-trattamento .riga-listino { margin: 0 0 12px; font-weight: 600; color: var(--petrolio-scuro, #083c4a); }
.scheda-trattamento .nota-voce { font-weight: 400; color: var(--grigio, #6d685e); font-size: .92em; }
.scheda-trattamento p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .scheda-trattamento { grid-template-columns: 1fr; gap: 16px; }
}

/* Prospetto delle patologie: l'ultima colonna porta alle schede di tutte le
   cure che quel blocco prevede (richiesta della Direzione, 16/09/2026).
   I collegamenti sono dichiarati esplicitamente: dentro la tabella ereditavano
   il colore del testo e non si distinguevano da una parola qualsiasi. */
.tabella .schede-cura { white-space: nowrap; font-size: .94em; }
.tabella .schede-cura a {
  display: inline-block; padding: 1px 0;
  color: var(--petrolio, #0b6577); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--venatura, #b9a889);
}
.tabella .schede-cura a:hover,
.tabella .schede-cura a:focus-visible { text-decoration-color: currentColor; }

/* --- blocchi della pagina «Il Centro e l'Acqua» ---------------------------
   Rimettono al loro posto le fotografie della pagina «Acque Albule» del sito
   precedente, che il primo recupero automatico aveva perso. 16/09/2026. */
.figura-affiancata { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; margin: 28px 0; }
.figura-affiancata img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--pietra); }
.figura-affiancata > div > :first-child { margin-top: 0; }

.citazione {
  margin: 32px 0; padding: 22px 26px; border-left: 4px solid var(--venatura, #b9a889);
  background: var(--calce, #f4efe4); border-radius: 0 12px 12px 0;
}
.citazione p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; font-style: italic; margin: 0 0 8px; }
.citazione cite { font-style: normal; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-testo, #6a562b); }

.archivi-storici { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 20px 0 32px; }
.archivi-storici a { display: block; text-decoration: none; border: 1px solid var(--pietra); border-radius: 12px; overflow: hidden; background: #fff; transition: box-shadow .2s ease, transform .2s ease; }
.archivi-storici a:hover, .archivi-storici a:focus-visible { box-shadow: 0 14px 34px rgba(11,101,119,.13); transform: translateY(-2px); }
.archivi-storici img { display: block; width: 100%; height: auto; }
.archivi-storici span { display: block; padding: 12px 16px; font-weight: 600; color: var(--petrolio-scuro, #083c4a); }

.tre-foto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 28px 0; }
.tre-foto img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--pietra); }

@media (max-width: 860px) { .figura-affiancata { grid-template-columns: 1fr; gap: 18px; } }
/* La planimetria ha una larghezza propria di 540 px: su telefono deve restare
   dentro lo schermo, altrimenti sfonda la pagina (556 px su 390). */
.planimetria { display: block; width: 100%; max-width: 540px; height: auto; border: 1px solid var(--pietra); border-radius: 10px; }
/* Fotografia di ciascuna tipologia di trattamento nella pagina Fisioterapia. */
.foto-tipologia { width: 100%; max-width: 720px; height: auto; border-radius: 12px; border: 1px solid var(--pietra); }

/* --- elenco delle patologie trattabili in convenzione ---------------------
   Centonove categorie diagnostiche dal depliant «Prestazioni erogabili» del
   comitato scientifico, raggruppate per ciclo di cura. Il campo di ricerca
   filtra in pagina: senza JavaScript restano tutte visibili, che è il
   comportamento giusto. Aggiunta del 16/09/2026. */
.cicli-ssn { display: grid; gap: 22px; margin-top: 24px; }
.ciclo-ssn { border: 1px solid var(--pietra); border-radius: 14px; padding: 22px 26px; background: #fff; }
.ciclo-ssn h3 { margin: 0 0 4px; font-size: 1.16rem; }
.ciclo-ssn h3 a { color: var(--petrolio-scuro, #083c4a); text-decoration: none; border-bottom: 2px solid var(--venatura, #b9a889); }
.ciclo-ssn h3 a:hover { border-bottom-color: currentColor; }
.ciclo-ssn .quante { font-size: .78rem; font-weight: 400; color: var(--grigio, #6d685e); letter-spacing: .06em; text-transform: uppercase; }
.ciclo-ssn .riga-listino { margin: 0 0 14px; font-size: .92rem; color: var(--grigio, #6d685e); font-weight: 400; }
.patologie { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2px 20px; margin: 0; padding-left: 20px; }
.patologie li { font-size: .95rem; padding: 2px 0; }
.cerca-patologia { display: block; font-weight: 600; margin-bottom: 6px; }
.cerca-patologia input {
  display: block; width: 100%; max-width: 30rem; margin-top: 6px; padding: 11px 14px;
  border: 1px solid var(--pietra); border-radius: 10px; font: inherit; font-weight: 400; background: #fff;
}
.cerca-patologia input:focus-visible { outline: 2px solid var(--petrolio, #0b6577); outline-offset: 1px; }
.ciclo-ssn[hidden], .patologie li[hidden] { display: none !important; }
/* Bibliografia: righe lunghe, quindi interlinea più ariosa e rientro sporgente. */
.bibliografia { list-style: none; padding-left: 0; }
.bibliografia li { padding-left: 1.4rem; text-indent: -1.4rem; margin-bottom: 10px; font-size: .95rem; line-height: 1.55; }

/* Briciole di pane dentro la testa affiancata. La regola esisteva già, ma
   limitata al componente: il markup delle pagine statiche viene iniettato e
   non la riceveva, così i separatori restavano attaccati alle parole. */
.testa-sezione .briciole-scheda { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grigio, #6d685e); }
.testa-sezione .briciole-scheda a { color: inherit; text-decoration: none; }
.testa-sezione .briciole-scheda a:hover { color: var(--petrolio, #0b6577); }
.testa-sezione .briciole-scheda span { margin: 0 .5rem; opacity: .5; }

/* --- copertina della home a due fotografie --------------------------------
   Si alternano in dissolvenza. La prima è nello sfondo del ::before, come
   sempre; la seconda vive in un elemento proprio che parte trasparente, così
   il browser la scarica dopo il primo disegno e l'apertura non rallenta.
   Chi ha chiesto meno animazioni vede solo la prima. 16/09/2026. */
.hero-alterna .hero-seconda {
  position: absolute; inset: 0; z-index: 1;
  background: var(--hero-foto-2, none) center/cover;
  transform: scale(1.03);
  opacity: 0;
  animation: alternaFoto 18s ease-in-out infinite;
}
.hero-alterna::after { z-index: 1; }
@media (max-width: 900px) { .hero-alterna .hero-seconda { background-image: var(--hero-foto-2-s, var(--hero-foto-2)); } }
@media (min-width: 901px) and (max-width: 1440px) { .hero-alterna .hero-seconda { background-image: var(--hero-foto-2-m, var(--hero-foto-2)); } }
@keyframes alternaFoto {
  0%, 42%   { opacity: 0; }
  50%, 92%  { opacity: 1; }
  100%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-alterna .hero-seconda { animation: none; opacity: 0; }
}

/* prezzo promozionale accanto al listino */
.promo{color:var(--petrolio);font-size:.85em;font-weight:600}

/* Avvisi di fine stagione del Parco Piscine (27/09/2026) — vedi src/lib/stagione.ts */
.avviso-stagione { border-left: 3px solid var(--sun, #c9a24a); padding: .4rem 0 .4rem 1rem; margin: 1rem 0 1.4rem; }
.avviso-chiusura { background: #fff; border-left: 4px solid var(--sun, #c9a24a); padding: 1rem 1.2rem; max-width: 46ch; }
.avviso-chiusura p { margin: 0 0 .4rem; font-size: .98rem; line-height: 1.6; }
.avviso-chiusura p:last-child { margin-bottom: 0; }