/* ==========================================================================
   Verifica Eredità — design system "fiduciario" v2
   Serif (Lora) per i titoli, Inter per il testo. Navy profondo + ottone
   discreto. Sobrio, istituzionale, rassicurante. Self-hosted, zero framework.
   ========================================================================== */

@font-face{
  font-family:'Lora';
  src:url('/fonts/lora-var.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* palette */
  --navy-950:#0B1624;
  --navy-900:#0E1B2C;
  --navy-800:#142639;
  --blu:#1E3A5F;
  --blu-scuro:#16324F;
  --oro:#9C7C46;          /* ottone su fondi chiari */
  --oro-chiaro:#C9A96A;   /* ottone su fondi scuri */
  --verde:#256A4C;        /* CTA — AA con testo bianco */
  --verde-scuro:#1E5740;
  --ambra:#B45309;
  --grigio-stato:#5F6B78;
  --ink:#26313D;
  --muted:#5A6674;
  --bg:#FFFFFF;
  --bg-alt:#F6F7F9;
  --linea:#E4E7EC;
  --linea-scura:#24374E;
  /* tipografia */
  --serif:'Lora', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* forme */
  --radius:10px;
  --ombra-sm:0 1px 2px rgba(16,24,40,.06);
  --ombra-md:0 6px 18px -6px rgba(16,24,40,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.container{max-width:760px; margin:0 auto; padding:0 22px}
.container-wide{max-width:1080px; margin:0 auto; padding:0 22px}

:focus-visible{outline:2px solid var(--oro-chiaro); outline-offset:2px; border-radius:3px}
::selection{background:#DCE6F2}

.salta{position:absolute; left:-9999px; top:0; background:#fff; color:var(--blu);
  padding:10px 16px; z-index:100; border-radius:0 0 8px 0; font-weight:600}
.salta:focus{left:0}

/* --------------------------------------------------------------------------
   Header + barra di rassicurazione
   -------------------------------------------------------------------------- */
header.sito{background:var(--navy-900); padding:18px 0}
.header-riga{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none}
.logo svg{flex:none}
.logo .nome{font-family:var(--serif); font-weight:600; font-size:21px; letter-spacing:.2px}
nav.principale{display:flex; flex-wrap:wrap; gap:4px}
nav.principale a{
  color:#C2CEDC; text-decoration:none; font-size:15.5px; font-weight:500;
  padding:8px 12px; border-radius:6px;
}
nav.principale a:hover{color:#fff; background:rgba(255,255,255,.06)}
.rassicurazione{
  background:var(--navy-800); color:#93A6BC; font-size:13.5px; letter-spacing:.04em;
  text-align:center; padding:8px 14px; border-top:1px solid var(--linea-scura);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  background:
    radial-gradient(1100px 420px at 88% -10%, rgba(201,169,106,.07), transparent 60%),
    var(--navy-900);
  color:#fff; padding:76px 0 68px;
  border-bottom:3px solid var(--oro);
}
.hero .occhiello{
  color:var(--oro-chiaro); font-size:14.5px; font-weight:600; letter-spacing:.09em;
  margin:0 0 18px;
}
.hero h1{
  font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(33px, 4.6vw, 46px); line-height:1.22; margin:0 0 20px;
  max-width:16em;
}
.hero .sottotitolo{
  color:#C6D0DC; font-size:19.5px; line-height:1.6; max-width:34em; margin:0 0 30px;
}
.hero .azioni{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px}
.fiducia{display:flex; gap:26px; flex-wrap:wrap; padding:0; margin:0; list-style:none}
.fiducia li{display:flex; align-items:center; gap:9px; color:#AFBDCC; font-size:15.5px}
.fiducia svg{flex:none; color:var(--oro-chiaro)}

/* --------------------------------------------------------------------------
   Sezioni e titoli
   -------------------------------------------------------------------------- */
section{padding:76px 0}
section.alt{background:var(--bg-alt)}
.occhiello{
  color:var(--oro); font-size:14px; font-weight:600; letter-spacing:.09em; margin:0 0 10px;
}
h1{font-family:var(--serif); color:var(--blu); font-weight:600; font-size:33px; line-height:1.25; margin:0 0 16px}
h2{font-family:var(--serif); color:var(--blu); font-weight:600; font-size:clamp(26px,3vw,31px); line-height:1.28; margin:0 0 14px}
h3{font-family:var(--serif); color:var(--blu); font-weight:600; font-size:21px; line-height:1.35; margin:0 0 10px}
p{margin:0 0 16px}
.lead{font-size:19px; color:var(--muted); max-width:38em; margin-bottom:34px}
.sottotitolo{font-size:19.5px; color:var(--muted)}
.nota{font-size:15.5px; color:var(--muted)}
ul.puliti{padding-left:22px; margin:0 0 16px}
ul.puliti li{margin-bottom:10px}

/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block; min-height:50px; padding:14px 30px;
  background:var(--verde); color:#fff; text-decoration:none;
  border:none; border-radius:8px; font-family:var(--sans);
  font-size:17px; font-weight:600; letter-spacing:.01em;
  cursor:pointer; text-align:center;
  box-shadow:var(--ombra-sm);
  transition:background-color .15s ease, box-shadow .15s ease;
}
.btn:hover{background:var(--verde-scuro); box-shadow:var(--ombra-md)}
.btn.secondario{background:transparent; color:var(--blu); border:1.5px solid var(--blu); box-shadow:none}
.btn.secondario:hover{background:var(--blu); color:#fff}
.btn.chiaro{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); box-shadow:none}
.btn.chiaro:hover{background:rgba(255,255,255,.1); border-color:#fff}
.btn[disabled]{background:var(--muted); cursor:not-allowed}

/* --------------------------------------------------------------------------
   Come funziona — 3 passi
   -------------------------------------------------------------------------- */
.passi{display:grid; gap:22px; margin-top:14px; counter-reset:passo}
@media(min-width:820px){.passi{grid-template-columns:repeat(3,1fr)}}
.passo{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radius);
  padding:30px 26px 26px; box-shadow:var(--ombra-sm); position:relative;
}
.passo .icona{
  width:52px; height:52px; border-radius:12px; background:var(--navy-900);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.passo .icona svg{color:var(--oro-chiaro)}
.passo .numero{
  position:absolute; top:26px; right:26px;
  font-family:var(--serif); font-size:15px; font-weight:600; color:var(--oro);
  letter-spacing:.06em;
}
.passo h3{margin-bottom:8px}
.passo p{margin:0; color:var(--muted); font-size:16.5px}

/* --------------------------------------------------------------------------
   Perché il fai-da-te fallisce
   -------------------------------------------------------------------------- */
.ostacoli{display:grid; gap:18px; margin-top:10px}
@media(min-width:820px){.ostacoli{grid-template-columns:1fr 1fr}}
.ostacolo{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radius);
  padding:22px 24px; display:flex; gap:16px; align-items:flex-start;
  box-shadow:var(--ombra-sm);
}
.ostacolo svg{flex:none; color:var(--oro); margin-top:3px}
.ostacolo h3{font-family:var(--sans); font-size:17px; font-weight:600; color:var(--ink); margin-bottom:5px}
.ostacolo p{margin:0; color:var(--muted); font-size:16px}
.numeri{
  display:flex; gap:0; flex-wrap:wrap; margin-top:30px;
  background:var(--navy-900); border-radius:var(--radius); overflow:hidden;
}
.numeri .voce{
  flex:1 1 180px; padding:24px 26px; text-align:center;
  border-right:1px solid var(--linea-scura);
}
.numeri .voce:last-child{border-right:none}
.numeri .valore{font-family:var(--serif); font-size:30px; font-weight:600; color:var(--oro-chiaro)}
.numeri .etichetta{color:#93A6BC; font-size:14.5px; margin-top:4px}

/* --------------------------------------------------------------------------
   Pacchetti
   -------------------------------------------------------------------------- */
.prodotti{display:grid; gap:22px; align-items:stretch}
@media(min-width:900px){.prodotti{grid-template-columns:repeat(3,1fr)}}
.prodotto{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radius);
  padding:30px 28px; display:flex; flex-direction:column;
  box-shadow:var(--ombra-sm);
}
.prodotto.in-evidenza{
  border-top:3px solid var(--oro); box-shadow:var(--ombra-md);
}
.etichetta{
  display:inline-block; align-self:flex-start;
  font-size:13.5px; font-weight:600; letter-spacing:.05em;
  color:var(--blu); background:var(--bg-alt);
  border:1px solid var(--linea); border-radius:999px;
  padding:4px 12px; margin-bottom:14px;
}
.prodotto.in-evidenza .etichetta{color:var(--oro); border-color:#E8DCC4; background:#FBF7EF}
.prodotto h3{margin-bottom:4px}
.prodotto .prezzo{
  font-family:var(--serif); font-size:38px; font-weight:600; color:var(--blu);
  margin:6px 0 16px;
}
.prodotto .prezzo small{font-family:var(--sans); font-size:14.5px; font-weight:400; color:var(--muted)}
.prodotto ul{list-style:none; padding:0; margin:0 0 24px}
.prodotto ul li{
  padding-left:28px; margin-bottom:11px; font-size:16px; position:relative;
}
.prodotto ul li::before{
  content:""; position:absolute; left:0; top:3px; width:17px; height:17px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C7C46' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
}
.prodotto .btn{margin-top:auto}
.prodotto .nota{margin:14px 0 0}

/* --------------------------------------------------------------------------
   Trasparenza
   -------------------------------------------------------------------------- */
.trasparenza{
  background:var(--navy-900); color:#E7EDF4;
  border-left:3px solid var(--oro-chiaro); border-radius:var(--radius);
  padding:36px 38px; box-shadow:var(--ombra-md);
}
.trasparenza h2{color:#fff; display:flex; align-items:center; gap:12px; margin-bottom:16px}
.trasparenza h2 svg{color:var(--oro-chiaro); flex:none}
.trasparenza p{font-size:19px; line-height:1.7; margin-bottom:10px}
.trasparenza .nota{color:#93A6BC; margin:14px 0 0}

/* --------------------------------------------------------------------------
   Stati esito
   -------------------------------------------------------------------------- */
.stato{display:inline-block; padding:2.5px 11px; border-radius:5px; color:#fff;
  font-size:14.5px; font-weight:600; letter-spacing:.01em}
.stato.esigibile{background:var(--verde)}
.stato.in-scadenza{background:var(--ambra)}
.stato.prescritto{background:var(--grigio-stato)}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq details{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radius);
  padding:0; margin-bottom:12px; box-shadow:var(--ombra-sm); overflow:hidden;
}
.faq summary{
  font-weight:600; font-size:17.5px; color:var(--blu); cursor:pointer;
  padding:19px 54px 19px 22px; position:relative; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-54%);
  font-family:var(--serif); font-size:26px; font-weight:500; color:var(--oro);
}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--linea)}
.faq details p{color:var(--muted); margin:0; padding:16px 22px 20px; font-size:16.5px}
.faq details p a{color:var(--blu)}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
form.verifica{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radius);
  padding:34px 32px; box-shadow:var(--ombra-sm);
}
form.verifica h3{padding-bottom:10px; border-bottom:1px solid var(--linea)}
form.verifica label{display:block; font-weight:600; font-size:15.5px; margin:18px 0 7px}
form.verifica input[type=text], form.verifica input[type=email],
form.verifica select, form.verifica textarea{
  width:100%; padding:13px 15px; border:1px solid #C7CFD9;
  border-radius:8px; font-size:17px; font-family:inherit; background:#fff;
  color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
form.verifica input:focus, form.verifica select:focus, form.verifica textarea:focus{
  outline:none; border-color:var(--blu); box-shadow:0 0 0 3px rgba(30,58,95,.14);
}
form.verifica .consenso{display:flex; gap:12px; align-items:flex-start; margin:16px 0; font-size:15.5px}
form.verifica .consenso input{width:21px; height:21px; flex:none; margin-top:2px; accent-color:var(--blu)}
form.verifica .consenso label{font-weight:400; margin:0}
.honeypot{position:absolute; left:-6000px; top:auto; width:1px; height:1px; overflow:hidden}
.avviso-invio{border-radius:8px; padding:14px 16px; font-size:15.5px; margin-top:16px}
.avviso-invio.ok{background:#EAF3EF; border:1px solid var(--verde)}
.avviso-invio.errore{background:#FBF3E8; border:1px solid var(--ambra)}

/* --------------------------------------------------------------------------
   CTA finale
   -------------------------------------------------------------------------- */
.cta-finale{
  background:var(--navy-900); color:#fff; text-align:center;
  padding:80px 0; border-top:3px solid var(--oro);
}
.cta-finale h2{color:#fff; margin-bottom:14px}
.cta-finale p{color:#C6D0DC; max-width:36em; margin:0 auto 30px; font-size:18.5px}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer.sito{
  background:var(--navy-950); color:#93A3B5; padding:56px 0 40px;
  font-size:15px; line-height:1.7;
}
footer.sito a{color:#C9D4E0; text-decoration:none}
footer.sito a:hover{color:#fff; text-decoration:underline}
.footer-griglia{display:grid; gap:36px; margin-bottom:36px}
@media(min-width:820px){.footer-griglia{grid-template-columns:2fr 1fr 1fr}}
.footer-griglia .marchio{display:flex; align-items:center; gap:10px; color:#fff; margin-bottom:14px}
.footer-griglia .marchio .nome{font-family:var(--serif); font-weight:600; font-size:19px}
.footer-griglia h4{
  color:#C9A96A; font-family:var(--sans); font-size:13.5px; font-weight:600;
  letter-spacing:.09em; margin:0 0 14px;
}
.footer-griglia ul{list-style:none; padding:0; margin:0}
.footer-griglia li{margin-bottom:9px}
footer.sito .disclaimer{font-size:13.5px; color:#7A8A9C; margin-bottom:14px}
footer.sito .legale-riga{
  border-top:1px solid var(--linea-scura); padding-top:22px;
  font-size:13.5px; color:#7A8A9C;
}

/* --------------------------------------------------------------------------
   Blog e pagine interne
   -------------------------------------------------------------------------- */
article.post h1{font-size:clamp(28px,3.6vw,36px)}
article.post h2{font-size:25px; margin-top:40px}
article.post h3{font-size:20px; margin-top:26px}
article.post .meta-articolo{color:var(--muted); font-size:15.5px; margin-bottom:28px;
  padding-bottom:18px; border-bottom:1px solid var(--linea)}
.elenco-post .voce{border-bottom:1px solid var(--linea); padding:26px 0}
.elenco-post .voce h2{font-size:22px; margin-bottom:8px}
.elenco-post .voce a{color:var(--blu); text-decoration:none}
.elenco-post .voce a:hover{text-decoration:underline}
.box-guida{
  background:var(--bg-alt); border-left:3px solid var(--oro);
  border-radius:8px; padding:22px 24px; margin:26px 0;
}
table.dati{width:100%; border-collapse:collapse; font-size:16px; margin:18px 0}
table.dati th, table.dati td{border:1px solid var(--linea); padding:10px 13px; text-align:left}
table.dati th{background:var(--bg-alt); color:var(--blu)}

@media(max-width:600px){
  section{padding:52px 0}
  .hero{padding:52px 0 48px}
  .trasparenza{padding:26px 22px}
  form.verifica{padding:24px 20px}
}