/* Avv. Alessandro Mancinelli — identità personale.
   Layout: colonna editoriale ampia, testata asimmetrica testo/foto, sezioni a fasce alternate. */
:root{
  --verde:#1d4434;        /* verde bosco: colore principale */
  --verde-scuro:#132d23;
  --ottone:#b8892b;       /* accento ottone, richiama la cravatta */
  --carta:#f4f6f3;        /* fondo chiaro con lieve tinta verde */
  --superficie:#ffffff;
  --inchiostro:#17201b;   /* testo */
  --grigio:#5b665f;       /* testo secondario */
  --linea:#d9dfd9;
  --su-verde:#eef3ef;
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-testo:"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --max:1180px;
  --r:6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --verde:#7fbf9f; --verde-scuro:#0d1c16; --ottone:#d8aa4c;
    --carta:#101613; --superficie:#16201b; --inchiostro:#e7ece8; --grigio:#a3b0a8;
    --linea:#2a362f; --su-verde:#eef3ef; color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --verde:#7fbf9f; --verde-scuro:#0d1c16; --ottone:#d8aa4c;
  --carta:#101613; --superficie:#16201b; --inchiostro:#e7ece8; --grigio:#a3b0a8;
  --linea:#2a362f; --su-verde:#eef3ef; color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--carta);color:var(--inchiostro);font-family:var(--font-testo);font-size:1.0625rem;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde)}
a:focus-visible,button:focus-visible{outline:3px solid var(--ottone);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.15;text-wrap:balance;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.7rem,3vw,2.4rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.testo{max-width:68ch}
.occhiello{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ottone);margin-bottom:.8em;display:block}
.piccolo{font-size:.9rem;color:var(--grigio)}

/* Header */
.testata{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--carta) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.testata .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.marchio{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--inchiostro)}
.marchio svg{flex:none}
.marchio b{font-family:var(--font-display);font-weight:500;font-size:1.15rem;display:block;line-height:1.1}
.marchio small{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grigio)}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
nav a{text-decoration:none;color:var(--inchiostro);font-size:.95rem;font-weight:500;padding:8px 12px;border-radius:var(--r)}
nav a:hover,nav a[aria-current="page"]{color:var(--verde);background:color-mix(in srgb,var(--verde) 9%,transparent)}
.menu-btn{display:none;background:none;border:1px solid var(--linea);color:var(--inchiostro);border-radius:var(--r);padding:8px 12px;font:inherit;cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:block}
  nav{position:absolute;left:0;right:0;top:72px;background:var(--carta);border-bottom:1px solid var(--linea);display:none}
  nav.aperto{display:block}
  nav ul{flex-direction:column;align-items:stretch;padding:12px 24px 20px}
  nav .btn{text-align:center;margin-top:8px}
}

/* Bottoni */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--verde);color:#fff;text-decoration:none;font-weight:700;font-size:.98rem;padding:14px 22px;border-radius:var(--r);border:2px solid var(--verde);transition:background .2s,transform .2s}
.btn:hover{background:var(--verde-scuro);border-color:var(--verde-scuro);transform:translateY(-1px)}
.btn.chiaro{background:transparent;color:var(--verde)}
.btn.chiaro:hover{background:color-mix(in srgb,var(--verde) 9%,transparent)}
nav .btn{color:#fff;padding:10px 16px}
nav .btn:hover{color:#fff;background:var(--verde-scuro)}
:root[data-theme="dark"] .btn,:root[data-theme="dark"] nav .btn{color:#0d1c16}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn,:root:not([data-theme="light"]) nav .btn{color:#0d1c16}}
:root[data-theme="dark"] .btn.chiaro{color:var(--verde)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.chiaro{color:var(--verde)}}

/* Hero */
.hero{padding:64px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero p.lead{font-size:1.2rem;color:var(--grigio);max-width:54ch}
.azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.foto-hero .cornice{position:relative;isolation:isolate}
.foto-hero img{border-radius:var(--r);aspect-ratio:4/5;object-fit:cover;width:100%}
.foto-hero .cornice::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--ottone);border-radius:var(--r);z-index:-1}
.firma{margin-top:30px;font-size:.9rem;color:var(--grigio)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:40px}.foto-hero{max-width:420px}}

/* Fasce */
.fascia{padding:80px 0}
.fascia.bianca{background:var(--superficie);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.fascia.verde{background:var(--verde-scuro);color:var(--su-verde)}
.fascia.verde h2,.fascia.verde h3{color:#fff}
.fascia.verde .piccolo{color:#b9c9bf}
.intro-sez{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:44px}
@media (max-width:800px){.intro-sez{grid-template-columns:1fr;gap:8px}}

/* Aree */
.aree{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--inchiostro)}
.area{padding:28px 28px 32px 0;border-right:1px solid var(--linea);display:flex;flex-direction:column}
.area+.area{padding-left:28px}
.area:last-child{border-right:0}
.area .num{font-family:var(--font-display);font-size:.95rem;color:var(--ottone);margin-bottom:18px}
.area .domanda{font-style:italic;color:var(--grigio);font-family:var(--font-display);font-size:1.05rem}
.area ul{padding-left:1.1em;margin:0 0 20px;color:var(--grigio);font-size:.97rem}
.area a.vai{margin-top:auto;font-weight:700;text-decoration:none}
.area a.vai:hover{text-decoration:underline}
@media (max-width:900px){.aree{grid-template-columns:1fr}.area,.area+.area{padding:28px 0;border-right:0;border-bottom:1px solid var(--linea)}}

/* Metodo */
.passi{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:passo}
.passo{border-top:1px solid #3d5a4c;padding-top:22px}
.passo::before{counter-increment:passo;content:"0" counter(passo);font-family:var(--font-display);font-size:2.4rem;color:var(--ottone);display:block;line-height:1;margin-bottom:14px}
.passo p{color:#c9d6ce}
@media (max-width:800px){.passi{grid-template-columns:1fr}}

/* Chi sono anteprima */
.due{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.due img{border-radius:var(--r)}
@media (max-width:800px){.due{grid-template-columns:1fr;gap:32px}}
.dati{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 32px;margin:28px 0;padding:0;list-style:none}
.dati li{border-left:2px solid var(--ottone);padding-left:14px;font-size:.95rem}
.dati b{display:block;font-family:var(--font-display);font-weight:500;font-size:1.1rem}
@media (max-width:500px){.dati{grid-template-columns:1fr}}

/* Articoli */
.articoli{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.articolo{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);padding:26px;display:flex;flex-direction:column}
.articolo .tag{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ottone)}
.articolo h3{margin-top:10px}
.articolo a{margin-top:auto;font-weight:700;text-decoration:none}
@media (max-width:900px){.articoli{grid-template-columns:1fr}}

/* CTA finale */
.cta{background:var(--verde);color:#fff;border-radius:var(--r);padding:56px;display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center}
.cta h2{color:#fff}
.cta p{color:#dfe9e3}
.cta .btn{background:#fff;color:var(--verde-scuro);border-color:#fff}
.cta .btn:hover{background:var(--su-verde)}
:root[data-theme="dark"] .cta{background:#1d4434}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cta{background:#1d4434}}
@media (max-width:800px){.cta{grid-template-columns:1fr;padding:36px 28px}}

/* Pagine interne */
.pagina-hero{padding:64px 0 40px;border-bottom:1px solid var(--linea)}
.pagina-hero p.lead{font-size:1.2rem;color:var(--grigio);max-width:60ch}
.corpo{padding:56px 0 80px}
.corpo .griglia{display:grid;grid-template-columns:1fr 320px;gap:64px;align-items:start}
.corpo h2{font-size:1.7rem;margin-top:1.6em}
.corpo h2:first-child{margin-top:0}
.corpo ul{padding-left:1.2em}
.corpo li{margin-bottom:.5em}
.lato{position:sticky;top:100px;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);padding:26px}
.lato h3{font-size:1.15rem}
.lato .btn{width:100%;justify-content:center;margin-top:8px}
@media (max-width:900px){.corpo .griglia{grid-template-columns:1fr}.lato{position:static}}
.riquadro{border-left:3px solid var(--ottone);background:var(--superficie);padding:18px 22px;margin:24px 0;border-radius:0 var(--r) var(--r) 0}
details{border-bottom:1px solid var(--linea);padding:16px 0}
details summary{cursor:pointer;font-weight:700;list-style-position:outside}
details p{margin:10px 0 0;color:var(--grigio)}
.contatti-lista{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.contatti-lista b{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grigio)}
.contatti-lista span{font-size:1.1rem}

/* Footer */
footer{background:var(--verde-scuro);color:#c9d6ce;padding:56px 0 32px;font-size:.92rem}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer h4{color:#fff;font-family:var(--font-display);font-weight:500;font-size:1.05rem;margin:0 0 12px}
footer a{color:#e6eee9}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer .legale{grid-column:1/-1;border-top:1px solid #2f4a3d;padding-top:20px;font-size:.82rem;color:#9fb2a7}
@media (max-width:800px){footer .wrap{grid-template-columns:1fr}}