:root{
  --ink:#0C2A32; --paper:#FAFAF7; --grigia:#F2F4F1; --teal:#177E95;
  --teal-deep:#0E5B6C; --copper:#B4642E; --stone:#51625F; --line:#D8E0DD;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Avenir Next","Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:var(--teal); text-decoration:none;}
a:hover{color:var(--teal-deep);}
h1,h2,h3{margin:0 0 .5em; line-height:1.15; font-weight:700; letter-spacing:-.015em;}
h1{font-size:46px;}
h2{font-size:34px;}
h3{font-size:19px;}
p{margin:0 0 1.1em; color:var(--stone);}

.dentro{max-width:1160px; margin:0 auto; padding:0 28px;}
.fascia{padding:84px 0;}
.fascia.grigia{background:var(--grigia);}
.fascia.scura{background:var(--ink);}
.fascia.scura h2,.fascia.scura h3{color:#fff;}
.fascia.scura p{color:#B9CBCA;}

.occhiello{font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal); font-weight:700; margin:0 0 14px;}
.fascia.scura .occhiello{color:#5FBACD;}
.guida{max-width:660px; font-size:18px;}

/* ---- intestazione ---- */
.testata{position:sticky; top:0; z-index:50; background:rgba(250,250,247,.94);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line);}
.testata .dentro{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px;}
.testata img{height:44px; width:auto;}
/* otto voci più il pulsante: senza nowrap "POSTURA 360°" andava a capo
   e il menu finiva sopra al logo */
.menu{display:flex; align-items:center; gap:20px; flex-wrap:nowrap;}
.menu a{font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap;}
.menu a:hover{color:var(--teal);}
.testata .dentro{gap:24px;}
.testata img{flex:0 0 auto;}

/* ---- pulsanti ---- */
.btn{display:inline-block; padding:14px 26px; border-radius:3px; font-weight:700;
  font-size:14px; letter-spacing:.05em; text-transform:uppercase;
  border:2px solid var(--teal); transition:all .18s ease; margin:6px 10px 6px 0;}
.btn.pieno{background:var(--teal); color:#fff;}
.btn.pieno:hover{background:var(--teal-deep); border-color:var(--teal-deep);}
.btn.vuoto{color:var(--teal);}
.btn.vuoto:hover{background:var(--teal); color:#fff;}
.fascia.scura .btn.vuoto{color:#fff; border-color:rgba(255,255,255,.5);}
.fascia.scura .btn.vuoto:hover{background:#fff; color:var(--ink); border-color:#fff;}

/* ---- apertura senza foto: tutto il peso sulla tipografia ---- */
.apertura-testo{padding:112px 0 96px;}
.apertura-testo h1{font-size:56px; max-width:900px; text-wrap:balance;}
.apertura-testo .sottotitolo{font-size:21px; max-width:700px;}
.apertura-testo .azioni{margin-top:30px;}

/* ---- apertura con foto (resta disponibile per quando ci saranno) ---- */
.apertura{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center;}
.apertura h1{margin-bottom:22px;}
.apertura .sottotitolo{font-size:19px;}
.foto-apertura{position:relative;}
.foto-apertura img{width:100%; height:520px; object-fit:cover; object-position:30% 40%; border-radius:4px;}
/* la foto a figura intera non va ritagliata: si mostra tutta, e lo sfondo
   dello scatto e' gia' stato portato sul colore carta del sito */
.foto-apertura img.intera{height:560px; object-fit:contain; border-radius:0;}
.didascalia{font-size:13px; color:var(--stone); margin:12px 0 0; line-height:1.5;}
.fascia.scura .didascalia{color:#8FA6A6;}

/* ---- numeri ---- */
.numeri{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; text-align:center;}
.numeri .n{display:block; font-size:44px; font-weight:700; color:var(--copper); line-height:1; margin-bottom:10px;}
.numeri p{font-size:15px; margin:0;}

/* ---- griglie ---- */
.griglia{display:grid; gap:26px; margin-top:46px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.scheda{background:#fff; border:1px solid var(--line); border-radius:4px; padding:32px 28px;}
.scheda p{font-size:16px; margin-bottom:0;}
.scheda .fase{display:block; font-size:12px; letter-spacing:.15em; font-weight:700; color:var(--copper); margin-bottom:12px;}
.scheda .oltre{display:inline-block; margin-top:16px; font-size:14px; font-weight:700;}
.fascia.scura .scheda{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);}
.fascia.scura .scheda h3{color:#fff;}
.fascia.scura .scheda p{color:#B9CBCA;}

/* ---- blocco con foto affiancata ---- */
.duecol{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.duecol.invertito .testo{order:2;}
.duecol img{width:100%; height:auto; border-radius:4px;}

/* ---- strumenti con foto ---- */
.strumenti{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px;}
.strumento img{width:100%; height:190px; object-fit:cover; border-radius:4px;}
.strumento h3{font-size:17px; margin:16px 0 6px;}
.strumento p{font-size:15px; margin:0;}

/* ---- prima / dopo ---- */
/* dentro una colonna il confronto affiancato scende a 250px e le mappe di
   pressione diventano illeggibili: si impilano */
.confronto{display:grid; grid-template-columns:1fr; gap:20px; margin-top:0;}
/* a tutta larghezza invece ci stanno accanto: ~540px l'una, ben leggibili */
.confronto.affiancato{grid-template-columns:1fr 1fr; gap:28px; margin-top:36px;}
.confronto figure{margin:0;}
.confronto img{width:100%; border-radius:4px; background:#fff;}
.confronto figcaption{font-size:13px; color:#8FA6A6; margin-top:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;}

/* ---- mappa incorporata ----
   iubenda la blocca finché non c'è consenso e al suo posto mostra un
   riquadro con l'avviso: questo sfondo evita che resti un buco bianco */
.mappa{margin-top:34px; border-radius:4px; overflow:hidden; background:#1C3F49; min-height:220px;}
.mappa iframe{display:block; width:100%; border:0;}

/* ---- elenco articoli ---- */
.articoli{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 26px; margin-top:34px;}
.articoli .articolo{display:flex; gap:16px; align-items:baseline; padding:15px 18px;
  background:#fff; border:1px solid var(--line); border-radius:4px; transition:border-color .15s ease;}
.articoli .articolo:hover{border-color:var(--teal);}
.articoli .anno{font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--copper);
  font-variant-numeric:tabular-nums; flex:0 0 auto;}
.articoli .titolo{color:var(--ink); font-size:16px; line-height:1.45;}
.articoli .articolo:hover .titolo{color:var(--teal);}

/* ---- citazione ---- */
.citazione{margin-top:40px; padding-left:26px; border-left:3px solid var(--copper); max-width:660px;}
.citazione p{font-size:22px; line-height:1.45; color:var(--ink); font-weight:700; margin:0 0 10px;}
.citazione .firma{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--copper); margin:0;}

/* ---- elenco puntato dentro una scheda ---- */
.elenco{list-style:none; padding:0; margin:0;}
.elenco li{position:relative; padding-left:20px; margin-bottom:11px; color:var(--stone); font-size:16px; line-height:1.5;}
.elenco li:last-child{margin-bottom:0;}
.elenco li:before{content:""; position:absolute; left:0; top:9px; width:6px; height:6px;
  background:var(--teal); border-radius:50%;}

/* ---- elenco disturbi ---- */
.disturbi{list-style:none; padding:0; margin:32px 0 0; display:grid;
  grid-template-columns:repeat(2,1fr); gap:11px 36px;}
.disturbi li{position:relative; padding-left:24px; color:var(--stone); font-size:16px;}
.disturbi li:before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px;
  background:var(--teal); border-radius:50%;}

/* ---- recensioni ---- */
.recensioni{text-align:center;}
.recensioni .n{font-size:52px; font-weight:700; color:var(--copper); line-height:1; display:block; margin-bottom:12px;}

/* ---- chiusura ---- */
.chiusura{text-align:center;}
.chiusura .guida{margin-left:auto; margin-right:auto;}
.recapiti{margin-top:26px; font-size:16px; color:var(--stone);}
.recapiti b{color:var(--ink);}

/* ---- piè di pagina ---- */
.pie{background:var(--ink); color:#C6D6D5; padding:64px 0 28px; font-size:15px;}
/* senza questa regola i paragrafi ereditano il grigio scuro del corpo testo
   e diventano illeggibili sul fondo petrolio */
.pie p{color:#C6D6D5;}
.pie h3{color:#fff; font-size:15px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px;}
.pie a{color:#8FCBD8;}
.pie a:hover{color:#fff;}
.pie .colonne{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px;}
.pie .coda{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  font-size:13px; color:#7D9494;}

/* fra 920 e 1180 il menu completo non ci sta: si stringe ancora */
@media (max-width:1180px) and (min-width:921px){
  .menu{gap:14px;}
  .menu a{font-size:12px;}
  .menu .btn{padding:11px 16px;}
}

@media (max-width:920px){
  h1{font-size:32px;} h2{font-size:26px;}
  .fascia{padding:56px 0;}
  .testata .menu{display:none;}
  .apertura-testo{padding:56px 0 48px;}
  .apertura-testo h1{font-size:34px;}
  .apertura-testo .sottotitolo{font-size:18px;}
  .apertura,.duecol,.numeri,.strumenti,.disturbi,.articoli,.g2,.g3,.g4,.pie .colonne{grid-template-columns:1fr;}
  .confronto.affiancato{grid-template-columns:1fr; gap:20px;}
  .duecol.invertito .testo{order:0;}
  .foto-apertura img{height:360px;}
  .foto-apertura img.intera{height:420px;}
  .numeri{gap:28px;}
}

/* ================= ARTICOLI DEL BLOG =================
   I 40 articoli sono l'unica parte del sito fatta di testo lungo da leggere,
   non da scorrere: colonna stretta, riga alta, misura intorno ai 70 caratteri. */
.dentro.stretto{max-width:760px;}
.apertura-testo .dentro.stretto h1{font-size:42px; max-width:none;}

.testo-lungo{font-size:18px; line-height:1.75; color:#2C3E3C;}
.testo-lungo p{margin:0 0 1.15em;}
.testo-lungo h2{font-size:28px; margin:1.9em 0 .5em;}
.testo-lungo h3{font-size:21px; margin:1.7em 0 .4em;}
.testo-lungo h4{font-size:18px; margin:1.5em 0 .35em; color:var(--teal-deep);}
.testo-lungo ul,.testo-lungo ol{margin:0 0 1.15em; padding-left:1.35em;}
.testo-lungo li{margin-bottom:.5em;}
.testo-lungo a{color:var(--teal-deep); text-decoration:underline; text-underline-offset:2px;}
.testo-lungo a:hover{color:var(--copper);}
.testo-lungo img{max-width:100%; height:auto; border-radius:4px; margin:1.6em 0;}
.testo-lungo strong,.testo-lungo b{font-weight:700; color:var(--ink);}
.testo-lungo blockquote{margin:1.8em 0; padding:4px 0 4px 24px;
  border-left:3px solid var(--teal); font-size:19px; color:var(--stone);}
.testo-lungo hr{border:0; border-top:1px solid var(--line); margin:2.2em 0;}
.testo-lungo table{width:100%; border-collapse:collapse; margin:1.6em 0; font-size:16px;}
.testo-lungo th,.testo-lungo td{border:1px solid var(--line); padding:10px 12px; text-align:left;}
.firma-articolo{margin:2.4em 0 0;}

/* elenco degli articoli, riusato dalla pagina Articoli e dalle categorie */
.data-articolo{font-size:13px; color:var(--stone); letter-spacing:.06em;
  text-transform:uppercase; margin:0 0 6px;}

@media (max-width:920px){
  .apertura-testo .dentro.stretto h1{font-size:30px;}
  .testo-lungo{font-size:17px;}
  .testo-lungo h2{font-size:24px;}
}

/* ---- avviso al posto della mappa bloccata ----
   Senza questo, prima del consenso restava solo un rettangolo scuro vuoto:
   il visitatore non capiva se fosse un errore del sito. */
.mappa-avviso{padding:34px 30px; color:#C6D6D5;}
.mappa-avviso p{margin:0 0 16px; font-size:16px; line-height:1.6; max-width:640px;}
.mappa-avviso b{color:#fff;}
.mappa-avviso .azioni-mappa{margin:0; display:flex; gap:12px; flex-wrap:wrap;}
.mappa-avviso .btn.vuoto{color:#fff; border-color:rgba(255,255,255,.5); margin:0;
  font-family:inherit; cursor:pointer; background:none;}
.mappa-avviso .btn.vuoto:hover{background:#fff; color:var(--ink); border-color:#fff;}

/* Ritratto nella fascia scura della pagina Studio. Lo sfondo dello scatto e'
   gia' scuro come la fascia, quindi si usa contain e non cover: l'immagine si
   vede intera e i bordi si fondono col colore del sito senza stacchi. */
.ritratto-fascia{margin:38px auto 0; max-width:460px;}
.ritratto-fascia img{width:100%; height:auto; display:block; border-radius:4px;}
@media (max-width:760px){ .ritratto-fascia{max-width:320px; margin-top:30px;} }

/* Immagine di apertura degli articoli. Erano rimaste solo nei metadati: la
   conversione da WordPress aveva perso la riga che le mostrava, e per 34
   articoli su 40 la foto c'era sul server ma non si vedeva. */
.foto-articolo{margin:0 0 30px;}
.foto-articolo img{width:100%; height:auto; display:block; border-radius:4px;}