:root{--navy:#172b46;--orange:#f05a2a;--ink:#292a32;--muted:#777987;--paper:#fffdfa;--line:#e9e4de}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Montserrat,Arial,sans-serif;line-height:1.72}
a{color:inherit}.top{padding:14px max(5vw,22px);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.top a{text-decoration:none;color:var(--navy);font-weight:700}.wrap{max-width:920px;margin:0 auto;padding:42px 24px 90px}
.kicker{color:var(--orange);font-weight:800;text-transform:uppercase;letter-spacing:.09em;font-size:13px}
h1{font-size:clamp(34px,5vw,58px);line-height:1.08;letter-spacing:-.04em;color:var(--navy);margin:12px 0 18px}
.lead{font-size:20px;color:#626575;line-height:1.55;margin:0 0 30px}
.hero{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:18px;background:#eee;margin:8px 0 34px}
article h2{font-size:25px;line-height:1.2;color:var(--navy);margin:38px 0 12px}
article p,article li{font-size:16px}article ul{padding-left:22px}
.note{background:#f5f1eb;border-left:4px solid var(--orange);padding:18px 22px;border-radius:0 12px 12px 0;margin:28px 0}
.check{border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin-top:30px}
.cta{margin-top:44px;padding:28px;border-radius:18px;background:var(--navy);color:white}
.cta a{display:inline-block;margin-top:8px;color:#ff8158;font-weight:800;text-decoration:none}
@media(max-width:600px){.wrap{padding:28px 18px 60px}.lead{font-size:18px}.hero{aspect-ratio:4/3}}

/* Numerazione unica degli approfondimenti */
.article-number{display:inline-block;margin:0 0 12px;color:var(--orange);font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
/* Azioni finali: pulsante e link sempre separati e leggibili */
article p.article-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:30px 0 0;line-height:1.5}
article p.article-actions .cta-link{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0;padding:15px 22px;border-radius:12px;background:var(--navy);color:#fff;font-weight:800;line-height:1.3;text-decoration:none;white-space:normal}
article p.article-actions>a:not(.cta-link){display:inline-block;margin:0;padding:10px 0;color:var(--navy);font-weight:700;text-decoration:none}
article p.article-actions .cta-link:hover{filter:brightness(1.12)}
@media(max-width:600px){article p.article-actions{align-items:stretch;flex-direction:column;gap:10px}article p.article-actions .cta-link{width:100%}}

/* FIX immagini interne agli articoli: evita il conflitto con .hero del CSS generale */
article img.hero,
.wrap article img.hero {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  padding: 0;
  margin: 8px 0 34px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #eee;
  grid-column: auto;
}
@media (max-width: 600px) {
  article img.hero,
  .wrap article img.hero {
    aspect-ratio: 4 / 3;
  }
}

/* Correzione definitiva: immagini hero degli articoli, esterne al tag article.
   Neutralizza le regole .hero generali di stile.css (homepage). */
.wrap > img.hero {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  padding: 0;
  margin: 8px 0 34px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #eee;
  grid-column: auto;
}

@media (max-width: 600px) {
  .wrap > img.hero {
    aspect-ratio: 4 / 3;
  }
}