/* Sistema di design di questo sito. Tema chiaro obbligatorio su tutta la rete. */
:root{
  --bg:#F4F7F4; --surf:#FFFFFF; --ink:#16241A; --mut:#566B5C; --pri:#1E7A4A; --acc:#D93B3B;
  --line:#DEE7E0; --pri-soft:#DFEAE3; --acc-soft:#F1E4E2; --pri-dark:#175F3A;
  --pri-light:#D6E6DC; --acc-light:#F1E0DE; --ink-soft:#909892;
  --ombra:0 1px 2px rgba(22,36,26,0.08), 0 8px 24px -12px rgba(22,36,26,0.14);
  --ombra-alta:0 2px 6px rgba(22,36,26,0.08), 0 24px 48px -20px rgba(22,36,26,0.14);
  --r:2px; --r2:4px;
  --ft:"Encode Sans", Georgia, "Times New Roman", serif;
  --fc:"Karla", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --passo:clamp(3.5rem, 7vw, 6.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--fc); font-size:1.0625rem; line-height:1.68;
  font-synthesis-weight:none; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--ft); line-height:1.16; letter-spacing:-.015em; margin:0 0 .6em; color:var(--ink); text-wrap:balance}
h1{font-size:clamp(2.05rem,4.6vw,3.35rem); font-weight:700}
h2{font-size:clamp(1.6rem,3vw,2.3rem); font-weight:700}
h3{font-size:clamp(1.16rem,1.7vw,1.4rem); font-weight:600}
p{margin:0 0 1.05em}
a{color:var(--pri); text-underline-offset:.18em; text-decoration-thickness:.08em}
a:hover{color:var(--pri-dark)}
ul,ol{padding-left:1.15rem}
li{margin:.35em 0}
strong{font-weight:650}
:focus-visible{outline:3px solid var(--acc); outline-offset:3px; border-radius:2px}
.contenitore{width:min(1160px,100% - 2.5rem); margin-inline:auto}
.stretto{width:min(760px,100% - 2.5rem); margin-inline:auto}
.salta{position:absolute; left:-9999px; top:0; background:var(--pri); color:#fff;
  padding:.7rem 1.1rem; z-index:200; border-radius:0 0 var(--r) 0}
.salta:focus{left:0}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.solo-lettori{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Intestazione */
.testata{position:sticky; top:0; z-index:80; background:rgba(255,255,255,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.testata__interno{display:flex; align-items:center; gap:1.4rem; min-height:70px}
.marchio{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--ft);
  font-weight:700; font-size:1.14rem; color:var(--ink); text-decoration:none; letter-spacing:-.02em}
.marchio__segno{width:30px; height:30px; flex:none; display:grid; place-items:center;
  background:var(--pri); color:#fff; border-radius:var(--r); font-size:.86rem; font-weight:700}
.menu{margin-left:auto; display:flex; align-items:center; gap:1.55rem}
.menu a{color:var(--ink); text-decoration:none; font-size:.95rem; font-weight:520}
.menu a:hover{color:var(--pri)}
.menu__interruttore{display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:var(--r); width:44px; height:40px; cursor:pointer; color:var(--ink)}
.menu__interruttore span{display:block; width:19px; height:2px; background:currentColor; margin:4px auto}

/* Bottoni */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--fc); font-weight:600; font-size:.98rem; line-height:1;
  padding:.92rem 1.5rem; border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease}
.btn--principale{background:var(--pri); color:#fff}
.btn--principale:hover{background:var(--pri-dark); color:#fff}
.btn--secondario{background:transparent; color:var(--pri); border-color:var(--pri)}
.btn--secondario:hover{background:var(--pri-light); color:var(--pri-dark)}
.btn--tenue{background:var(--surf); color:var(--ink); border-color:var(--line)}
.btn--tenue:hover{border-color:var(--pri); color:var(--pri)}

/* Sezioni */
.sezione{padding-block:var(--passo)}
.sezione--tinta{background:var(--pri-light)}
.sezione--carta{background:var(--surf); border-block:1px solid var(--line)}
.sezione__testata{max-width:44rem; margin-bottom:2.7rem}
.occhiello{display:inline-block; font-family:var(--fc); font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--pri); margin-bottom:.85rem}
.sezione__testata p{color:var(--mut); font-size:1.08rem; margin:0}

/* Griglie e schede */
.griglia{display:grid; gap:1.35rem}
.griglia--2{grid-template-columns:repeat(2,1fr)}
.griglia--3{grid-template-columns:repeat(3,1fr)}
.griglia--4{grid-template-columns:repeat(4,1fr)}
.scheda{background:var(--surf); padding:1.7rem; border-radius:var(--r2); height:100%}
.scheda h3{margin-bottom:.5rem}
.scheda p{color:var(--mut); margin:0; font-size:.985rem}
.scheda__numero{font-family:var(--ft); font-size:.85rem; font-weight:700; color:var(--acc);
  letter-spacing:.1em; display:block; margin-bottom:.7rem}

/* Eroe */
.eroe{padding-block:clamp(3rem,6vw,5.2rem) var(--passo); position:relative; overflow:hidden}
.eroe__occhiello{display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--pri); background:var(--pri-light);
  padding:.42rem .85rem; border-radius:999px; margin-bottom:1.1rem}
.eroe h1{margin-bottom:.7rem}
.eroe__sub{font-size:clamp(1.05rem,1.7vw,1.22rem); color:var(--mut); max-width:34rem; margin-bottom:1.7rem}
.eroe__azioni{display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:1.9rem}
.eroe__punti{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.6rem 1.5rem}
.eroe__punti li{display:flex; align-items:center; gap:.5rem; font-size:.94rem; color:var(--ink); margin:0}
.eroe__punti li::before{content:""; width:8px; height:8px; flex:none; background:var(--acc); border-radius:2px}
.eroe figure{margin:0}
.eroe img{width:100%; object-fit:cover}

/* Problema, soluzione */
.racconto p{font-size:1.08rem}
.racconto p:first-of-type::first-letter{font-family:var(--ft); font-size:3.1rem; float:left;
  line-height:.86; padding:.08em .12em 0 0; color:var(--pri)}
.sintomi{list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:.7rem}
.sintomi li{display:flex; gap:.75rem; align-items:flex-start; background:var(--surf);
  border:1px solid var(--line); border-left:3px solid var(--acc); padding:.85rem 1.1rem;
  border-radius:0 var(--r) var(--r) 0; margin:0; font-size:.98rem}
.passi{counter-reset:passo; display:grid; gap:1.2rem; margin-top:2.2rem}
.passo{position:relative; padding-left:3.4rem}
.passo::before{counter-increment:passo; content:counter(passo); position:absolute; left:0; top:0;
  width:2.4rem; height:2.4rem; display:grid; place-items:center; background:var(--pri); color:#fff;
  font-family:var(--ft); font-weight:700; border-radius:var(--r)}
.passo h3{margin-bottom:.3rem}
.passo p{color:var(--mut); margin:0}

/* Vantaggi */
.vantaggio{display:flex; gap:1.1rem; align-items:flex-start}
.vantaggio__segno{flex:none; width:2.7rem; height:2.7rem; display:grid; place-items:center;
  background:var(--acc-light); color:var(--pri); border-radius:var(--r); font-weight:700;
  font-family:var(--ft)}

/* Testimonianze */
.nota-scenari{font-size:.9rem; color:var(--mut); background:var(--surf); border:1px dashed var(--line);
  padding:.75rem 1rem; border-radius:var(--r); margin-bottom:1.8rem; display:inline-block}
.testimonianza{background:var(--surf); padding:1.8rem; border-radius:var(--r2); height:100%;
  display:flex; flex-direction:column}
.testimonianza blockquote{margin:0 0 1.2rem; font-size:1.02rem; quotes:"\201C" "\201D"}
.testimonianza blockquote::before{content:open-quote; font-family:var(--ft); font-size:2.6rem;
  color:var(--acc); line-height:0; vertical-align:-.35em; margin-right:.12em}
.testimonianza figcaption{margin-top:auto; font-size:.9rem; color:var(--mut)}
.testimonianza figcaption b{display:block; color:var(--ink); font-size:.98rem; font-weight:650}

/* Prezzi */
.piani{display:grid; grid-template-columns:repeat(3,1fr); gap:1.35rem; align-items:stretch}
.piano{background:var(--surf); border:1px solid var(--line); border-radius:var(--r2);
  padding:1.9rem 1.6rem; display:flex; flex-direction:column}
.piano--evidenza{border-color:var(--pri); border-width:2px; box-shadow:var(--ombra-alta); position:relative}
.piano--evidenza::after{content:"Il più scelto"; position:absolute; top:-.85rem; left:1.6rem;
  background:var(--pri); color:#fff; font-size:.74rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:.3rem .7rem; border-radius:999px}
.piano__nome{font-family:var(--ft); font-size:1.16rem; font-weight:700; margin-bottom:.35rem}
.piano__prezzo{font-family:var(--ft); font-size:2.5rem; font-weight:700; line-height:1; color:var(--pri)}
.piano__prezzo span{font-size:.88rem; font-weight:500; color:var(--mut); font-family:var(--fc)}
.piano__descrizione{color:var(--mut); font-size:.95rem; margin:.9rem 0 1.2rem}
.piano ul{list-style:none; padding:0; margin:0 0 1.6rem; display:grid; gap:.55rem}
.piano li{display:flex; gap:.6rem; font-size:.95rem; margin:0}
.piano li::before{content:""; flex:none; width:1.05rem; height:1.05rem; margin-top:.28rem;
  background:var(--acc); clip-path:polygon(14% 46%,3% 58%,38% 92%,97% 22%,86% 12%,37% 68%)}
.piano .btn{margin-top:auto; width:100%}
.prezzi__nota{color:var(--mut); font-size:.92rem; margin-top:1.6rem}

/* Domande frequenti */
.faq{display:grid; gap:.75rem}
.faq details{background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  padding:0 1.25rem; overflow:hidden}
.faq summary{cursor:pointer; padding:1.05rem 0; font-family:var(--ft); font-weight:650;
  font-size:1.03rem; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:.72rem; height:.72rem; border-right:2px solid var(--pri);
  border-bottom:2px solid var(--pri); transform:rotate(45deg); transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details[open]{border-color:var(--pri)}
.faq__risposta{padding-bottom:1.15rem; color:var(--mut); margin:0}

/* Articoli */
.griglia-articoli{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.scheda-articolo{background:var(--surf); border-radius:var(--r2); overflow:hidden;
  display:flex; flex-direction:column; height:100%}
.scheda-articolo__figura{margin:0; aspect-ratio:16/9; overflow:hidden; background:var(--pri-light)}
.scheda-articolo__figura img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.scheda-articolo:hover .scheda-articolo__figura img{transform:scale(1.04)}
.scheda-articolo__corpo{padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1}
.scheda-articolo h3{font-size:1.06rem; margin-bottom:.5rem}
.scheda-articolo h3 a{color:var(--ink); text-decoration:none}
.scheda-articolo h3 a:hover{color:var(--pri); text-decoration:underline}
.scheda-articolo p{color:var(--mut); font-size:.93rem; margin:0 0 1rem}
.scheda-articolo__meta{margin-top:auto; font-size:.83rem; color:var(--mut);
  letter-spacing:.04em; text-transform:uppercase}

/* Modulo di contatto */
.contatto{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:3rem; align-items:start}
.form{background:var(--surf); border:1px solid var(--line); border-radius:var(--r2); padding:1.9rem}
.campo{margin-bottom:1.15rem}
.campo label{display:block; font-size:.9rem; font-weight:620; margin-bottom:.4rem}
.campo input,.campo select,.campo textarea{width:100%; font:inherit; font-size:.98rem;
  padding:.78rem .9rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg); color:var(--ink)}
.campo textarea{min-height:9rem; resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--pri); outline-offset:1px}
.form .btn{width:100%}
.form__nota{font-size:.86rem; color:var(--mut); margin:1rem 0 0}
.alternativa{font-size:.95rem; color:var(--mut); margin-top:1.2rem}

/* Piede di pagina */
.piede{background:var(--surf); border-top:1px solid var(--line); padding-block:3.6rem 0; margin-top:var(--passo)}
.piede__griglia{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.25fr; gap:2.2rem}
.piede h2,.piede h3{font-family:var(--ft); font-size:.87rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); margin-bottom:1rem}
.piede ul{list-style:none; padding:0; margin:0; display:grid; gap:.55rem}
.piede li{margin:0}
.piede a{color:var(--mut); text-decoration:none; font-size:.93rem}
.piede a:hover{color:var(--pri); text-decoration:underline}
.piede__claim{color:var(--mut); font-size:.95rem; margin:.9rem 0 1.1rem}
.piede__eco a{display:block; line-height:1.45}
.piede__barra{margin-top:3rem; border-top:1px solid var(--line); padding-block:1.4rem;
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; align-items:center; font-size:.86rem; color:var(--mut)}
.piede__barra a{font-size:.86rem}
.piede__preferenze{background:none; border:1px solid var(--line); border-radius:var(--r);
  padding:.42rem .8rem; font:inherit; font-size:.86rem; color:var(--mut); cursor:pointer}
.piede__preferenze:hover{border-color:var(--pri); color:var(--pri)}

/* Banner dei cookie */
.cookie{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:120; max-width:44rem;
  margin-inline:auto; background:var(--surf); border:1px solid var(--line);
  border-radius:var(--r2); box-shadow:var(--ombra-alta); padding:1.4rem 1.5rem}
.cookie[hidden]{display:none}
.cookie h2{font-size:1.08rem; margin-bottom:.5rem}
.cookie p{font-size:.93rem; color:var(--mut); margin:0 0 1.1rem}
.cookie__azioni{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}
.cookie__azioni .btn{padding:.72rem 1.2rem; font-size:.93rem}
.cookie__dettagli{font-size:.9rem; color:var(--mut); margin-top:1rem}
.cookie__dettagli[hidden]{display:none}

/* Pagine editoriali */
.pagina{padding-block:clamp(2.6rem,5vw,4rem)}
.briciole{font-size:.86rem; color:var(--mut); margin-bottom:1.4rem}
.briciole a{color:var(--mut)}
.prosa{font-size:1.05rem}
.prosa h2{margin-top:2.6rem}
.prosa h3{margin-top:1.9rem}
.prosa table{width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.95rem}
.prosa th,.prosa td{border:1px solid var(--line); padding:.7rem .85rem; text-align:left; vertical-align:top}
.prosa th{background:var(--pri-light); font-family:var(--ft); font-weight:650}
.prosa blockquote{margin:1.6rem 0; padding:1rem 1.3rem; border-left:3px solid var(--acc);
  background:var(--surf); color:var(--mut)}
.aggiornamento{font-size:.9rem; color:var(--mut); border-top:1px solid var(--line);
  margin-top:2.6rem; padding-top:1.2rem}

/* Articolo */
.articolo__testata{padding-block:clamp(2.2rem,4vw,3.4rem) 0}
.articolo__meta{font-size:.88rem; color:var(--mut); display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem}
.figura-evidenza{margin:0 0 2.2rem; border-radius:var(--r2); overflow:hidden}
.figura-evidenza img{width:100%; aspect-ratio:3/2; object-fit:cover}
.figura-evidenza figcaption{font-size:.83rem; color:var(--mut); padding:.6rem .2rem 0}
.chapo{font-size:1.16rem; line-height:1.6; color:var(--ink); font-weight:520;
  border-left:3px solid var(--pri); padding-left:1.1rem; margin-bottom:2rem}
.corpo{font-size:1.06rem}
.corpo h2{margin-top:2.7rem}
.corpo h3{margin-top:2rem}
.corpo ul,.corpo ol{margin:1.2rem 0}
.corpo table{width:100%; border-collapse:collapse; margin:1.8rem 0; font-size:.95rem}
.corpo th,.corpo td{border:1px solid var(--line); padding:.7rem .85rem; text-align:left; vertical-align:top}
.corpo th{background:var(--pri-light); font-family:var(--ft); font-weight:650}
.autore-box{display:flex; gap:1.3rem; align-items:flex-start; background:var(--surf);
  border:1px solid var(--line); border-radius:var(--r2); padding:1.6rem; margin-top:3rem}
.autore-box img{width:78px; height:78px; border-radius:50%; object-fit:cover; flex:none}
.autore-box h2{font-size:1.06rem; margin-bottom:.4rem}
.autore-box p{font-size:.95rem; color:var(--mut); margin:0 0 .7rem}
.autore-box__social{display:flex; flex-wrap:wrap; gap:.9rem; font-size:.89rem}
.da-leggere{margin-top:3.4rem; padding-top:2.6rem; border-top:1px solid var(--line)}
.da-leggere h2{font-size:1.4rem; margin-bottom:1.6rem}
.mappa-elenco{display:grid; gap:2rem}
.mappa-elenco ul{list-style:none; padding:0; display:grid; gap:.5rem}
.mappa-elenco li{margin:0}
.grazie{text-align:center; padding-block:clamp(3.5rem,8vw,6rem)}
.grazie__segno{width:64px; height:64px; margin:0 auto 1.6rem; display:grid; place-items:center;
  background:var(--pri); color:#fff; border-radius:50%; font-size:1.7rem}

@media (max-width:1000px){
  .piede__griglia{grid-template-columns:repeat(2,1fr); gap:2rem}
  .contatto{grid-template-columns:1fr; gap:2.2rem}
  .griglia--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .menu{position:fixed; inset:70px 0 auto; flex-direction:column; align-items:stretch;
    gap:0; background:var(--surf); border-bottom:1px solid var(--line); padding:.6rem 1.25rem 1.4rem;
    box-shadow:var(--ombra); margin:0}
  .menu[hidden]{display:none}
  .menu a{padding:.85rem 0; border-bottom:1px solid var(--line)}
  .menu .btn{margin-top:.9rem}
  .menu__interruttore{display:block}
  .griglia--2,.griglia--3,.piani,.griglia-articoli{grid-template-columns:1fr}
  .eroe__griglia{grid-template-columns:1fr !important}
}
@media (max-width:560px){
  .griglia--4{grid-template-columns:1fr}
  .piede__griglia{grid-template-columns:1fr}
  .autore-box{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .scheda-articolo:hover .scheda-articolo__figura img{transform:none}
}
@media print{.testata,.cookie,.piede__preferenze{display:none}}

/* Varianti di questo sito */
.btn{border-radius:var(--r)}.btn--principale{background:linear-gradient(120deg,var(--pri),var(--acc))}.btn--principale:hover{filter:saturate(1.15) brightness(1.04); background:linear-gradient(120deg,var(--pri),var(--acc))}
.scheda,.testimonianza,.scheda-articolo{border:1px solid var(--line); border-top:3px solid var(--pri)}.scheda:hover,.scheda-articolo:hover{border-top-color:var(--acc)}
.sezione__testata{border-top:2px solid var(--ink); padding-top:1.4rem}.sezione__testata .occhiello{color:var(--ink)}
.sezione__testata h2{font-style:italic}
.eroe__griglia{display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center}.eroe img{border-radius:var(--r2); box-shadow:var(--ombra-alta)}