/* Palette e tipografia ufficiali Opplà — brand spec 07/07/2026
   Blu #3c3c82 · Giallo #f0c318 · Bianco. Titoli Montserrat Black, testo Poppins.
   Regola brand: due dominanti per pezzo, bianco/nebbia come terzo respiro.
   Mai giallo su bianco per il testo: il giallo è fondo o accento, mai inchiostro. */
:root{
  --blu:#3c3c82; --blu-scuro:#2e2e64; --blu-chiaro:#5b5aa6;
  --giallo:#f0c318; --giallo-scuro:#d9ae0d; --giallo-tenue:#fdf3d1;
  --nebbia:#f4f4f9; --bordo:#e2e2ee; --bianco:#fff;
  --testo:#1e1e3a; --testo-soft:#5a5a78; --testo-tenue:#8e8ea8;
  --display:'Montserrat',system-ui,sans-serif;
  --radius:14px; --max:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--testo);
  background:var(--bianco);line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;letter-spacing:-.02em;line-height:1.2}
a{color:var(--blu);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

header.top{border-bottom:1px solid var(--bordo);background:var(--bianco);position:sticky;top:0;z-index:50}
header.top .wrap{display:flex;align-items:center;gap:14px;height:66px}
.logo{display:flex;align-items:center;gap:12px}
.logo:hover{text-decoration:none}
.logo img{height:24px;width:auto;display:block}
.logo .etichetta{font-family:var(--display);font-weight:700;font-size:.83rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--testo-tenue);padding-left:12px;border-left:1px solid var(--bordo)}
.top-link{margin-left:auto;font-size:.9rem;color:var(--testo-soft);font-weight:500}

.hero{background:var(--blu);color:#fff;padding:60px 0 64px;text-align:center;
  background-image:radial-gradient(ellipse at 50% 0%,#4a49a0 0%,var(--blu) 62%)}
.hero h1{margin:0 0 10px;font-size:2.35rem;color:#fff}
.hero h1 .acc{color:var(--giallo)}
.hero p.sub{margin:0 auto 28px;color:rgba(255,255,255,.8);max-width:520px;font-weight:300}
.cerca{position:relative;max-width:560px;margin:0 auto}
.cerca input{width:100%;padding:15px 18px 15px 48px;border:1px solid transparent;border-radius:var(--radius);
  font-size:1rem;font-family:inherit;color:var(--testo);background:var(--bianco);outline:none;
  box-shadow:0 4px 18px rgba(20,20,50,.16)}
.cerca input::placeholder{color:var(--testo-tenue)}
.cerca input:focus{border-color:var(--giallo);box-shadow:0 0 0 3px rgba(240,195,24,.45)}
.cerca svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--testo-tenue);z-index:2}
.cerca-strip{border-bottom:1px solid var(--bordo);background:var(--nebbia);padding:14px 0}
.cerca-strip .cerca{max-width:100%;margin:0}
.cerca-strip input{padding:11px 16px 11px 44px;font-size:.94rem;border-color:var(--bordo);box-shadow:none}
.cerca-strip input:focus{border-color:var(--blu);box-shadow:0 0 0 3px rgba(60,60,130,.15)}
.risultati{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--bianco);border:1px solid var(--bordo);
  border-radius:var(--radius);box-shadow:0 14px 38px rgba(20,20,50,.18);text-align:left;overflow:hidden;
  display:none;z-index:60;max-height:60vh;overflow-y:auto}
.risultati.on{display:block}
.risultati a{display:block;padding:12px 18px;border-bottom:1px solid var(--bordo);color:var(--testo)}
.risultati a:last-child{border-bottom:0}
.risultati a:hover{background:var(--nebbia);text-decoration:none}
.risultati .rt{font-weight:600;font-size:.96rem}
.risultati .rc{font-size:.79rem;color:var(--testo-tenue);margin-top:2px}
.risultati .vuoto{padding:16px 18px;color:var(--testo-soft);font-size:.92rem}

main{padding:48px 0 76px}
h2.sez{font-size:1.4rem;margin:0 0 6px;color:var(--blu)}
p.sez-sub{margin:0 0 22px;color:var(--testo-soft);font-size:.94rem;font-weight:300}
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px;margin-bottom:46px}
.card{display:block;border:1px solid var(--bordo);border-radius:var(--radius);padding:22px;background:var(--bianco);
  transition:border-color .15s,box-shadow .15s,transform .15s;color:var(--testo)}
.card:hover{border-color:var(--blu);box-shadow:0 8px 22px rgba(60,60,130,.11);transform:translateY(-2px);text-decoration:none}
.card .em{font-size:1.6rem;display:block;margin-bottom:10px;line-height:1}
.card h3{margin:0 0 5px;font-size:1.03rem;font-weight:800}
.card p{margin:0;font-size:.87rem;color:var(--testo-soft);font-weight:300}
.card .conta{margin-top:12px;font-size:.76rem;color:var(--testo-tenue);font-weight:500}
.area-card{background:var(--nebbia)}
.area-card:hover{background:var(--bianco)}

.elenco{border:1px solid var(--bordo);border-radius:var(--radius);overflow:hidden;margin-bottom:42px;background:var(--bianco)}
.elenco a{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--bordo);
  color:var(--testo);font-weight:500}
.elenco a:last-child{border-bottom:0}
.elenco a:hover{background:var(--nebbia);text-decoration:none;color:var(--blu)}
.elenco .freccia{margin-left:auto;color:var(--testo-tenue)}

nav.briciole{font-size:.84rem;color:var(--testo-soft);margin-bottom:22px;font-weight:300}
nav.briciole a{color:var(--testo-soft)}
article.testo{max-width:720px}
article.testo h1{font-size:1.95rem;margin:0 0 8px}
article.testo .meta{color:var(--testo-tenue);font-size:.84rem;margin-bottom:32px;font-weight:300}
article.testo h2{font-size:1.28rem;margin:36px 0 10px;color:var(--blu)}
article.testo h3{font-size:1.06rem;margin:26px 0 8px;font-weight:800}
article.testo p,article.testo li{color:#33334f}
article.testo ul,article.testo ol{padding-left:22px}
article.testo li{margin-bottom:7px}
article.testo strong{font-weight:600;color:var(--testo)}
article.testo blockquote{margin:24px 0;padding:15px 20px;background:var(--nebbia);
  border-left:4px solid var(--giallo);border-radius:0 8px 8px 0}
article.testo blockquote p{margin:0;color:var(--testo-soft)}
article.testo code{background:var(--nebbia);padding:2px 6px;border-radius:5px;font-size:.88em;color:var(--blu)}
article.testo pre{background:var(--testo);color:#f2f2f8;padding:16px;border-radius:10px;overflow-x:auto}
article.testo pre code{background:none;color:inherit;padding:0}
article.testo img{max-width:100%;border-radius:10px;border:1px solid var(--bordo)}
article.testo hr{border:0;border-top:1px solid var(--bordo);margin:32px 0}

.bozza{background:var(--giallo-tenue);border:1px solid var(--giallo);color:var(--blu);
  padding:11px 15px;border-radius:10px;font-size:.87rem;font-weight:500;margin-bottom:26px}
.correlati{max-width:720px;margin-top:54px;padding-top:26px;border-top:1px solid var(--bordo)}
.correlati h4{margin:0 0 12px;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--testo-tenue);font-weight:700}
.aiuto-box.larga{max-width:none}
.aiuto-box{max-width:720px;margin-top:42px;background:var(--blu);border-radius:var(--radius);padding:28px;color:#fff}
.aiuto-box h4{margin:0 0 6px;font-size:1.12rem;color:#fff}
.aiuto-box p{margin:0 0 16px;color:rgba(255,255,255,.78);font-size:.92rem;font-weight:300}
.btn{display:inline-block;background:var(--giallo);color:var(--blu);padding:12px 22px;border-radius:10px;
  font-weight:600;font-size:.93rem}
.btn:hover{background:var(--giallo-scuro);text-decoration:none;color:var(--blu-scuro)}

footer{background:var(--blu);color:rgba(255,255,255,.66);padding:34px 0;font-size:.84rem;font-weight:300}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer img{height:19px;width:auto;display:block;opacity:.95}
footer a{color:#fff}
footer .dx{margin-left:auto}

@media(max-width:640px){
  header.top .wrap{height:58px;gap:10px}
  .logo img{height:20px}
  .logo .etichetta{font-size:.7rem;padding-left:10px}
  .top-link{display:none}
  .hero{padding:42px 0 46px}.hero h1{font-size:1.7rem}
  main{padding:34px 0 58px}
  article.testo h1{font-size:1.52rem}
  .griglia{grid-template-columns:1fr}
  footer .wrap{gap:12px}.footer .dx{margin-left:0}
}