/* ═══════════════════════════════════════════════════════════
   SpaccaNapoli · blog
   Stessa direzione della landing: notte napoletana, rosso neon,
   limone e azzurro come tocchi. Foglio a sé: il blog non carica
   styles.css della home (pesa animazioni e sezioni che qui non servono).
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:      #0A0D16;
  --ink-2:    #0E1220;
  --ink-3:    #141A2B;
  --neon:     #FF2E35;
  --neon-hi:  #ff5158;
  --azzurro:  #38A9E8;
  --lemon:    #F5CE3C;
  --white:    #F6F5F2;
  --smoke:    #9AA3B8;
  --smoke-2:  #8B95A9;

  --display: 'Anton', Impact, sans-serif;
  --script:  'Pacifico', cursive;
  --body:    'Manrope', system-ui, sans-serif;

  --wrap: 1180px;
  --lettura: 720px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--ink); color:var(--white);
  font-family:var(--body); font-size:clamp(1.02rem,.98rem + .25vw,1.14rem); line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--lemon); }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.wrap--lettura{ width:min(100% - 2.5rem, var(--lettura)); margin-inline:auto; }

.skip{ position:absolute; left:-9999px; top:0; z-index:120; background:var(--neon); color:#fff; padding:.75rem 1.25rem; font-weight:800; }
.skip:focus{ left:0; }
:where(a,button,summary):focus-visible{ outline:3px solid var(--lemon); outline-offset:3px; border-radius:3px; }

/* ═══════ NAV ═══════ */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem clamp(1rem,4vw,2.5rem);
  background:rgba(10,13,22,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
/* il logo del blog porta all'home del blog, non alla landing: il badge serve a
   far capire che si è in una sezione a sé, e non nel sito che vende */
.nav__brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.nav__brand img{ width:clamp(140px,18vw,180px); height:auto; }
.nav__badge{
  font-family:var(--body); font-size:.62rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lemon);
  border:1px solid rgba(245,206,60,.5); border-radius:4px;
  padding:.16rem .4rem; line-height:1; white-space:nowrap;
}
@media (max-width:520px){ .nav__badge{ display:none; } }
.nav__links{ display:flex; align-items:center; gap:clamp(.9rem,2.5vw,1.8rem); }
.nav__links a{ color:var(--white); text-decoration:none; font-weight:700; font-size:.93rem; }
.nav__links a:hover{ color:var(--lemon); }
.nav__cta{
  background:var(--neon); color:#fff !important; padding:.6rem 1.15rem; border-radius:999px;
  box-shadow:0 0 22px rgba(255,46,53,.45); white-space:nowrap;
}
.nav__cta:hover{ background:var(--neon-hi); color:#fff !important; }
@media (max-width:620px){ .nav__links .solo-desktop{ display:none; } }

/* ═══════ BRICIOLE ═══════ */
.briciole{ font-size:.83rem; color:var(--smoke-2); padding:1.5rem 0 .25rem; }
.briciole a{ color:var(--smoke); text-decoration:none; }
.briciole a:hover{ color:var(--lemon); }
.briciole span{ opacity:.55; margin:0 .35rem; }

/* ═══════ TESTATA ARTICOLO ═══════ */
.testata{ padding:1rem 0 2.5rem; }
.kicker{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--neon); margin:0 0 1rem;
}
.kicker::before{ content:''; width:26px; height:2px; background:var(--neon); box-shadow:0 0 10px var(--neon); }
h1.titolo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.15rem,1.35rem + 3.6vw,4rem); line-height:.98;
  letter-spacing:.005em; margin:0 0 1.1rem; text-wrap:balance;
}
.sottotitolo{ font-size:clamp(1.06rem,1rem + .4vw,1.28rem); color:var(--smoke); margin:0 0 1.5rem; text-wrap:pretty; }
.meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; font-size:.84rem; color:var(--smoke-2); }
.meta b{ color:var(--white); font-weight:700; }

.cover{ margin:2rem 0 0; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:var(--ink-2); }
.cover img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.cover figcaption{ font-size:.8rem; color:var(--smoke-2); padding:.7rem 1rem; border-top:1px solid rgba(255,255,255,.07); }

/* ═══════ RISPOSTA SECCA (il blocco che copiano gli LLM) ═══════ */
.secca{
  margin:2.5rem 0; padding:1.5rem 1.6rem;
  background:linear-gradient(180deg, rgba(255,46,53,.11), rgba(255,46,53,.04));
  border:1px solid rgba(255,46,53,.35); border-left:4px solid var(--neon);
  border-radius:12px;
}
.secca p:first-child{ margin-top:0; }
.secca p:last-child{ margin-bottom:0; }
.secca__h{
  font-size:.73rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--neon); margin:0 0 .6rem;
}
.secca p{ font-size:1.06rem; }

/* ═══════ CORPO ═══════ */
.corpo{ padding-bottom:3rem; }
.corpo h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,1.2rem + 1.7vw,2.4rem); line-height:1.08;
  margin:3.2rem 0 1rem; text-wrap:balance;
}
.corpo h3{
  font-size:clamp(1.14rem,1.05rem + .45vw,1.4rem); font-weight:800;
  margin:2.2rem 0 .7rem; color:var(--white); text-wrap:balance;
}
.corpo p{ margin:0 0 1.15rem; text-wrap:pretty; }
.corpo b, .corpo strong{ color:#fff; font-weight:800; }
.corpo a{ color:var(--lemon); text-underline-offset:3px; }
.corpo ul, .corpo ol{ margin:0 0 1.4rem; padding-left:1.35rem; }
.corpo li{ margin-bottom:.6rem; }
.corpo li::marker{ color:var(--neon); }
.corpo hr{ border:0; border-top:1px solid rgba(255,255,255,.1); margin:3rem 0; }

.corpo figure.foto{ margin:2.2rem 0; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.1); }
/* le foto vere delle serate sono quasi tutte verticali: in un riquadro 16:9 si vedrebbe
   solo la striscia alta (i balconi) e si perderebbe la gente. Il 4:3 tagliato un po'
   sotto il centro tiene dentro le persone, che sono il soggetto. */
.corpo figure.foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 48%; }
@media (max-width:600px){ .corpo figure.foto img{ aspect-ratio:1/1; } }
.corpo figure.foto figcaption{ font-size:.8rem; color:var(--smoke-2); padding:.65rem .9rem; background:var(--ink-2); }

/* citazione / mic drop */
.micdrop{
  font-family:var(--script); font-size:clamp(1.35rem,1.1rem + 1.1vw,1.95rem);
  color:var(--lemon); text-align:center; line-height:1.35;
  margin:2.6rem 0; padding:0 1rem;
}
blockquote{
  margin:2.2rem 0; padding:1.1rem 1.4rem;
  border-left:3px solid var(--azzurro); background:rgba(56,169,232,.07);
  border-radius:0 10px 10px 0; font-size:1.06rem;
}
blockquote p:last-child{ margin-bottom:0; }
blockquote cite{ display:block; margin-top:.6rem; font-size:.84rem; color:var(--smoke-2); font-style:normal; }

/* tabella */
.tabellona{ overflow-x:auto; margin:2rem 0; border:1px solid rgba(255,255,255,.12); border-radius:12px; }
.tabellona table{ border-collapse:collapse; width:100%; min-width:520px; font-size:.95rem; }
.tabellona th, .tabellona td{ padding:.8rem 1rem; text-align:left; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top; }
.tabellona th{ background:var(--ink-3); font-weight:800; font-size:.85rem; letter-spacing:.02em; }
.tabellona tr:last-child td{ border-bottom:0; }

/* le due colonne "noi / tu" */
.duecol{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; margin:2rem 0; }
@media (max-width:640px){ .duecol{ grid-template-columns:1fr; } }
.duecol__c{ background:var(--ink-2); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:1.2rem 1.3rem; }
.duecol__c h4{ margin:0 0 .7rem; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }
.duecol__c--si h4{ color:var(--lemon); }
.duecol__c--no h4{ color:var(--azzurro); }
.duecol__c ul{ margin:0; padding-left:1.15rem; font-size:.96rem; }

/* ═══════ FAQ ═══════ */
.faq{ margin:1.4rem 0 0; }
.faq details{
  border:1px solid rgba(255,255,255,.12); border-radius:10px;
  margin-bottom:.65rem; background:var(--ink-2); overflow:hidden;
}
.faq summary{
  cursor:pointer; padding:1rem 1.2rem; font-weight:800; list-style:none;
  display:flex; justify-content:space-between; gap:1rem; align-items:flex-start;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; color:var(--neon); font-size:1.35rem; line-height:1; flex:0 0 auto; }
/* segno meno vero (U+2212), non un trattino medio: quello è vietato ovunque */
.faq details[open] summary::after{ content:'\2212'; }
.faq details > p{ margin:0; padding:0 1.2rem 1.15rem; color:var(--smoke); }
.faq details[open] summary{ border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:1rem; }

/* ═══════ CTA ═══════ */
.cta{
  margin:3.5rem 0 1rem; padding:2.2rem 1.8rem; text-align:center;
  background:radial-gradient(120% 140% at 50% 0%, rgba(255,46,53,.20), rgba(10,13,22,0) 70%), var(--ink-2);
  border:1px solid rgba(255,46,53,.3); border-radius:18px;
}
.cta h2{ font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,1.2rem + 1.5vw,2.2rem); line-height:1.1; margin:0 0 .8rem; }
.cta p{ color:var(--smoke); margin:0 auto 1.5rem; max-width:46ch; }
.btn{
  display:inline-block; background:var(--neon); color:#fff; text-decoration:none;
  font-weight:800; padding:.95rem 1.9rem; border-radius:999px;
  box-shadow:0 0 30px rgba(255,46,53,.5); transition:transform .2s var(--ease), background .2s;
}
.btn:hover{ background:var(--neon-hi); transform:translateY(-2px); }

/* ═══════ ALTRI ARTICOLI ═══════ */
.altri{ padding:3rem 0 1rem; border-top:1px solid rgba(255,255,255,.1); }
.altri h2{ font-family:var(--display); font-weight:400; font-size:1.8rem; margin:0 0 1.5rem; }
.griglia{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); }
.card{
  background:var(--ink-2); border:1px solid rgba(255,255,255,.1); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s var(--ease), border-color .25s;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(255,46,53,.5); }
.card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.card__b{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.card__tag{ font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--neon); margin:0 0 .5rem; }
.card__t{ font-size:1.07rem; font-weight:800; line-height:1.3; margin:0 0 .55rem; }
.card__t a{ color:var(--white); text-decoration:none; }
.card__t a:hover{ color:var(--lemon); }
.card__p{ font-size:.92rem; color:var(--smoke); margin:0 0 .9rem; flex:1; }
.card__kw{ font-size:.76rem; color:var(--smoke-2); margin:0; }

/* ═══════ HUB ═══════ */
.hub{ padding:2.5rem 0 1rem; }
.hub h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.3rem,1.4rem + 4vw,4.4rem); line-height:.98; margin:0 0 1rem;
}
.hub__lead{ font-size:clamp(1.05rem,1rem + .45vw,1.3rem); color:var(--smoke); max-width:56ch; margin:0 0 2rem; }
.hub__hero{ border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.1); margin-bottom:3rem; }
.hub__hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; max-height:420px; }
.hub__sez{ margin:3rem 0 1.2rem; }
.hub__sez h2{ font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem); margin:0 0 .4rem; }
.hub__sez p{ color:var(--smoke-2); font-size:.95rem; margin:0; }

/* ═══════ FOOTER ═══════ */
.footer{ margin-top:4rem; padding:3rem 0 2.5rem; border-top:1px solid rgba(255,255,255,.1); background:var(--ink-2); text-align:center; }
.footer img{ width:190px; margin:0 auto 1.2rem; }
.footer p{ font-size:.86rem; color:var(--smoke-2); margin:.35rem 0; }
.footer a{ color:var(--smoke); }
.footer a:hover{ color:var(--lemon); }
.footer__claim{ font-family:var(--script); color:var(--lemon) !important; font-size:1.15rem; margin-top:1.4rem !important; }