/* =====================================================================
   PRONTO INTERVENTO CASA — Alessandro Sghettini · Pescara
   Statico, nessuna dipendenza esterna, nessun cookie.
   ===================================================================== */

:root{
  /* ---- TEMA CHIARO (predefinito) — colori derivati dal logo del cliente ---- */
  --c-bg:        #ffffff;
  --c-bg-2:      #f4f6fa;
  --c-bg-3:      #eaeff6;
  --c-surface:   #ffffff;
  --c-surface-2: #f7f9fc;
  --c-foot:      #eef1f6;
  --c-line:      rgba(13,21,38,.10);
  --c-line-2:    rgba(13,21,38,.17);
  --c-txt:       #0d1526;
  --c-txt-soft:  #5b6478;
  --c-red:       #c1102b;
  --c-red-deep:  #8f0d22;
  --c-accent:    #c1102b;
  --c-wa:        #25d366;
  --c-wa-deep:   #128c4a;

  --c-nav:       rgba(255,255,255,.78);
  --c-nav-2:     rgba(255,255,255,.95);
  --c-ghost:     rgba(13,21,38,.05);
  --c-ghost-h:   rgba(13,21,38,.10);
  --glow-a:      rgba(193,16,43,.13);
  --glow-b:      rgba(50,105,235,.07);
  --glow-clima:  rgba(40,120,235,.10);
  --streak-op:   .20;
  --h1-em:       #0d1526;
  --c-dim:       #7d8698;
  --logo-light:  block;
  --logo-dark:   none;

  /* tipografia */
  --f-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-xs: .8125rem;
  --t-s:  .9375rem;
  --t-m:  1.0625rem;
  --t-l:  1.25rem;
  --t-xl: clamp(1.65rem, 5.2vw, 2.6rem);
  --t-hero: clamp(2.1rem, 8.4vw, 4.4rem);

  /* spazio */
  --s-1: .375rem;  --s-2: .75rem;  --s-3: 1.125rem;  --s-4: 1.75rem;
  --s-5: 2.5rem;   --s-6: 3.75rem; --s-7: 5.25rem;   --s-8: 7rem;

  --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-pill: 999px;
  --om-m: 0 10px 26px rgba(13,21,38,.10);
  --om-l: 0 22px 48px rgba(13,21,38,.14);

  --dur: .55s;
  --ease: cubic-bezier(.22,.85,.3,1);

  --wrap: 1180px;
  --gutter: clamp(1.1rem, 5vw, 2.5rem);
  --nav-h: 62px;
}


/* ---- TEMA SCURO (interruttore in alto a destra) ---- */
:root[data-theme="dark"]{
  --c-bg:        #05070c;
  --c-bg-2:      #0a0e17;
  --c-bg-3:      #070c16;
  --c-surface:   #101725;
  --c-surface-2: #161e2f;
  --c-foot:      #03050a;
  --c-line:      rgba(255,255,255,.09);
  --c-line-2:    rgba(255,255,255,.16);
  --c-txt:       #eff3fa;
  --c-txt-soft:  #9aa5b8;
  --c-red:       #e01a36;
  --c-red-deep:  #96061f;
  --c-accent:    #ff5065;

  --c-nav:       rgba(5,7,12,.72);
  --c-nav-2:     rgba(5,7,12,.93);
  --c-ghost:     rgba(255,255,255,.06);
  --c-ghost-h:   rgba(255,255,255,.12);
  --glow-a:      rgba(224,26,54,.20);
  --glow-b:      rgba(70,110,255,.10);
  --glow-clima:  rgba(60,150,255,.16);
  --streak-op:   .55;
  --h1-em:       #ffffff;
  --c-dim:       #66707f;
  --logo-light:  none;
  --logo-dark:   block;

  --om-m: 0 12px 32px rgba(0,0,0,.42);
  --om-l: 0 24px 60px rgba(0,0,0,.55);
}

/* i due lockup del logo: si scambiano col tema */
.logo-l{ display:var(--logo-light); }
.logo-d{ display:var(--logo-dark); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--f-ui);
  font-size:var(--t-m);
  line-height:1.62;
  color:var(--c-txt);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ line-height:1.1; margin:0; letter-spacing:-.022em; font-weight:800; }
p{ margin:0 0 var(--s-3); }
em{ font-style:normal; color:var(--c-accent); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:820px; }
.sprite{ display:none; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--c-red); color:#fff; padding:.7rem 1rem; border-radius:0 0 var(--r-s) 0;
}
.skip:focus{ left:0; }

:where(a,button,summary):focus-visible{
  outline:2px solid var(--c-accent); outline-offset:3px; border-radius:6px;
}

/* ---------- icone ---------- */
.i{ width:1.15em; height:1.15em; fill:currentColor; flex:0 0 auto; }
.i--lg{ width:2rem; height:2rem; }

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font:inherit; font-weight:700; font-size:var(--t-s); letter-spacing:-.01em;
  padding:.78rem 1.2rem; border-radius:var(--r-pill);
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .28s var(--ease), background-color .22s;
  min-height:46px;
}
.btn--lg{ font-size:var(--t-m); padding:1rem 1.6rem; min-height:54px; }
.btn--sm{ padding:.5rem .9rem; min-height:40px; font-size:var(--t-xs); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--red{
  background:linear-gradient(135deg,var(--c-red),var(--c-red-deep));
  color:#fff; box-shadow:0 10px 26px rgba(224,26,54,.34);
}
.btn--red:hover{ box-shadow:0 16px 38px rgba(224,26,54,.46); }

.btn--wa{
  background:linear-gradient(135deg,var(--c-wa),var(--c-wa-deep));
  color:#03210f; box-shadow:0 10px 26px rgba(37,211,102,.24);
}
.btn--wa:hover{ box-shadow:0 16px 38px rgba(37,211,102,.34); }

.btn--ghost{ background:var(--c-ghost); color:var(--c-txt); border-color:var(--c-line-2); }
.btn--ghost:hover{ background:var(--c-ghost-h); }

.btn--dark{ background:#0b0f17; color:#fff; box-shadow:var(--om-m); }

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--c-nav);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background-color .3s;
}
.nav.is-stuck{ border-bottom-color:var(--c-line); background:var(--c-nav-2); }
.nav__in{ display:flex; align-items:center; gap:var(--s-3); min-height:var(--nav-h); }
.nav__logo{ display:block; flex:0 0 auto; }
.nav__logo img{ height:34px; width:auto; }
.nav__links{ display:none; margin-left:auto; gap:1.35rem; }
.nav__links a{
  text-decoration:none; font-size:var(--t-s); font-weight:600; color:var(--c-txt-soft);
  padding:.35rem 0; position:relative; transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--c-red); transition:right .28s var(--ease);
}
.nav__links a:hover{ color:var(--c-txt); }
.nav__links a:hover::after{ right:0; }
.nav__cta{ display:flex; gap:.5rem; margin-left:auto; }
.nav__cta .btn span{ display:none; }

@media (min-width:640px){
  .nav__cta .btn span{ display:inline; }
}
@media (min-width:1000px){
  :root{ --nav-h:74px; }
  .nav__logo img{ height:42px; }
  .nav__links{ display:flex; }
  .nav__cta{ margin-left:var(--s-4); }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--c-bg);
  padding:calc(var(--s-6) + 1rem) 0 var(--s-6);
}
.hero__glow{
  position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:radial-gradient(60% 55% at 22% 18%, var(--glow-a), transparent 70%),
             radial-gradient(50% 50% at 88% 8%, var(--glow-b), transparent 70%);
  z-index:-2;
}
.hero__streak{
  position:absolute; z-index:-1; pointer-events:none;
  top:14%; right:-38%; width:130%; height:46%;
  background:linear-gradient(94deg,
      transparent 0%, transparent 38%,
      rgba(224,26,54,.0) 42%,
      rgba(224,26,54,.55) 52%,
      rgba(255,120,140,.85) 55%,
      rgba(224,26,54,.45) 58%,
      transparent 72%);
  filter:blur(1.5px);
  transform:rotate(-14deg);
  opacity:var(--streak-op);
}
.hero__streak::after{
  content:""; position:absolute; inset:8% 0 auto 0; height:2px;
  background:linear-gradient(90deg,transparent, rgba(255,255,255,.65) 55%, transparent);
  filter:blur(1px);
}
.hero__in{ position:relative; }

.eyebrow{
  display:inline-block; font-size:var(--t-xs); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-accent); margin:0 0 var(--s-3);
  padding:.4rem .85rem; border:1px solid rgba(224,26,54,.35); border-radius:var(--r-pill);
  background:rgba(224,26,54,.09);
}
.hero h1{
  font-size:var(--t-hero); font-weight:900; letter-spacing:-.035em;
  margin:0 0 var(--s-3); max-width:17ch; text-wrap:balance;
}
.hero h1 em{
  background:linear-gradient(100deg,var(--h1-em) 4%, var(--c-accent) 52%, var(--c-red) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{ font-size:var(--t-l); color:var(--c-txt-soft); max-width:56ch; margin-bottom:var(--s-4); }
.hero__btns{ display:flex; flex-wrap:wrap; gap:.75rem; }
.hero__btns .btn{ flex:1 1 260px; }
.hero__sign{
  margin:var(--s-4) 0 0; font-size:var(--t-s); color:var(--c-txt-soft);
  display:flex; align-items:center; gap:.6rem;
}
.hero__sign::before{ content:""; width:26px; height:2px; background:var(--c-red); }

@media (min-width:800px){
  .hero{ padding:var(--s-8) 0 var(--s-7); }
  .hero__btns .btn{ flex:0 0 auto; }
}

/* =====================================================================
   BARRA PROVE
   ===================================================================== */
.prove{
  background:linear-gradient(180deg,var(--c-bg),var(--c-bg-2));
  border-block:1px solid var(--c-line);
  padding:var(--s-5) 0;
}
.prove__grid{ display:grid; gap:var(--s-4); }
.prova h2{ font-size:var(--t-l); margin:.6rem 0 .3rem; }
.prova p{ margin:0; color:var(--c-txt-soft); font-size:var(--t-s); }
.prova .i{ color:var(--c-red); }
@media (min-width:760px){
  .prove__grid{ grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
}

/* =====================================================================
   SEZIONI GENERICHE
   ===================================================================== */
.sec{ padding:var(--s-7) 0; }
.sec--tight{ padding:var(--s-6) 0; }
.sec__head{ margin-bottom:var(--s-5); }
.h2{ font-size:var(--t-xl); font-weight:900; letter-spacing:-.03em; max-width:24ch; text-wrap:balance; }
.sub{ color:var(--c-txt-soft); font-size:var(--t-l); margin:var(--s-3) 0 0; max-width:52ch; }
.sec__cta{ margin-top:var(--s-5); }

/* ---------- cards servizi ---------- */
.cards{ display:grid; gap:var(--s-3); }
.card{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--c-surface),var(--c-bg-2));
  border:1px solid var(--c-line); border-radius:var(--r-m);
  padding:var(--s-4);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card::before{
  content:""; position:absolute; inset:0 auto auto 0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--c-red),var(--c-accent));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.card:hover{ transform:translateY(-4px); border-color:var(--c-line-2); box-shadow:var(--om-m); }
.card:hover::before{ transform:scaleX(1); }
.card .i{ color:var(--c-red); }
.card h3{ font-size:var(--t-l); margin:.8rem 0 .5rem; }
.card p{ color:var(--c-txt-soft); font-size:var(--t-s); margin:0; }
.card__note{ margin-top:.7rem !important; color:var(--c-txt) !important; }
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); gap:var(--s-3); } }
@media (min-width:1000px){ .cards{ grid-template-columns:repeat(3,1fr); } }

/* =====================================================================
   FOCUS CONDIZIONATORI
   ===================================================================== */
.clima{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg,var(--c-bg-2),var(--c-bg-3));
  border-block:1px solid var(--c-line);
  padding:var(--s-7) 0;
}
.clima__glow{
  position:absolute; inset:auto -20% -40% auto; width:90%; height:100%;
  background:radial-gradient(50% 50% at 70% 40%, var(--glow-clima), transparent 70%);
  z-index:-1;
}
.clima__in{ display:grid; gap:var(--s-5); align-items:center; }
.clima__marche{ font-size:var(--t-l); }
.ticks{ list-style:none; margin:0 0 var(--s-4); padding:0; display:grid; gap:.85rem; }
.ticks li{ position:relative; padding-left:2rem; color:var(--c-txt-soft); font-size:var(--t-s); }
.ticks li strong{ color:var(--c-txt); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.45em; width:1.1rem; height:.55rem;
  border-left:2.5px solid var(--c-red); border-bottom:2.5px solid var(--c-red);
  transform:rotate(-45deg);
}
.ticks--dark li::before{ border-color:var(--c-accent); }

/* mini illustrazione split (CSS puro, nessuna immagine) */
.clima__art{ display:none; }
@media (min-width:900px){
  .clima__in{ grid-template-columns:1.15fr .85fr; gap:var(--s-6); }
  .clima__art{ display:grid; place-items:center; }
  .split{ position:relative; width:min(340px,100%); }
  .split__body{
    height:112px; border-radius:14px 14px 22px 22px;
    background:linear-gradient(170deg,#f4f7fb,#c9d3e2);
    box-shadow:0 26px 60px rgba(0,0,0,.55), inset 0 -14px 22px rgba(0,0,0,.10);
    display:flex; flex-direction:column; justify-content:flex-end; gap:5px; padding:0 16px 14px;
  }
  .split__body span{ height:3px; border-radius:2px; background:rgba(10,20,40,.16); }
  .split__body span:nth-child(2){ width:80%; }
  .split__body span:nth-child(3){ width:60%; }
  .split__air{ position:absolute; inset:auto 0 -84px 0; display:flex; justify-content:center; gap:26px; }
  .split__air i{
    width:8px; height:64px; border-radius:var(--r-pill);
    background:linear-gradient(180deg,rgba(120,190,255,.9),transparent);
    animation:blow 2.6s var(--ease) infinite;
  }
  .split__air i:nth-child(2){ animation-delay:.35s; height:78px; }
  .split__air i:nth-child(3){ animation-delay:.7s; }
  @keyframes blow{
    0%{ opacity:0; transform:translateY(-12px) scaleY(.5); }
    35%{ opacity:1; }
    100%{ opacity:0; transform:translateY(16px) scaleY(1); }
  }
}

/* =====================================================================
   COME FUNZIONA
   ===================================================================== */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-4); counter-reset:s; }
.step{
  position:relative; padding:var(--s-4) var(--s-4) var(--s-4) var(--s-4);
  background:linear-gradient(160deg,var(--c-surface),transparent 70%);
  border:1px solid var(--c-line); border-radius:var(--r-m);
}
.step__n{
  display:inline-grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--c-red),var(--c-red-deep)); color:#fff;
  font-weight:900; font-size:var(--t-l); box-shadow:0 8px 22px rgba(224,26,54,.35);
}
.step h3{ font-size:var(--t-l); margin:.9rem 0 .45rem; }
.step p{ margin:0; color:var(--c-txt-soft); font-size:var(--t-s); }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); } }

/* =====================================================================
   CHI SONO
   ===================================================================== */
.chi{
  background:linear-gradient(180deg,var(--c-bg-2),var(--c-bg));
  border-block:1px solid var(--c-line);
  padding:var(--s-7) 0;
}
.chi__in{ display:grid; gap:var(--s-5); }
.chi__txt .h2{ margin-bottom:var(--s-4); }
.chi__txt p{ color:var(--c-txt-soft); }
.chi__txt p strong{ color:var(--c-txt); }
.chi__card{
  background:linear-gradient(160deg,var(--c-surface-2),var(--c-bg-2));
  border:1px solid var(--c-line-2); border-radius:var(--r-l);
  padding:var(--s-4); text-align:center; box-shadow:var(--om-l);
}
.chi__card img{ width:104px; height:104px; margin:0 auto var(--s-3); border-radius:var(--r-m); }
.chi__name{ font-weight:800; font-size:var(--t-l); margin:0 0 .2rem; }
.chi__role{ color:var(--c-txt-soft); font-size:var(--t-s); margin:0 0 var(--s-3); }
@media (min-width:900px){
  .chi__in{ grid-template-columns:1.5fr .85fr; gap:var(--s-6); align-items:start; }
  .chi__card{ position:sticky; top:calc(var(--nav-h) + 20px); }
}

.zona__note{ color:var(--c-txt-soft); max-width:62ch; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{ display:grid; gap:.7rem; }
.q{
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-m);
  overflow:hidden; transition:border-color .25s, background-color .25s;
}
.q[open]{ border-color:rgba(224,26,54,.4); background:var(--c-surface-2); }
.q summary{
  cursor:pointer; list-style:none; padding:1.05rem 3rem 1.05rem 1.2rem;
  font-weight:700; font-size:var(--t-m); position:relative;
}
.q summary::-webkit-details-marker{ display:none; }
.q summary::after{
  content:""; position:absolute; right:1.2rem; top:50%; width:11px; height:11px;
  border-right:2.5px solid var(--c-red); border-bottom:2.5px solid var(--c-red);
  transform:translateY(-70%) rotate(45deg); transition:transform .28s var(--ease);
}
.q[open] summary::after{ transform:translateY(-25%) rotate(-135deg); }
.q__a{ padding:0 1.2rem 1.15rem; }
.q__a p{ margin:0; color:var(--c-txt-soft); font-size:var(--t-s); }
.q__a p strong{ color:var(--c-txt); }

/* =====================================================================
   BANDA CTA
   ===================================================================== */
.banda{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,var(--c-red-deep),var(--c-red) 55%,#c2122c);
  padding:var(--s-6) 0;
}
.banda::before{
  content:""; position:absolute; inset:-50% -10% auto -10%; height:200%;
  background:radial-gradient(40% 40% at 20% 30%, rgba(255,255,255,.16), transparent 70%);
}
.banda__in{ position:relative; text-align:center; }
.banda h2{ font-size:var(--t-xl); font-weight:900; margin:0 0 var(--s-2); }
.banda h2 em{ color:#0a0d14; }
.banda p{ color:rgba(255,255,255,.9); max-width:52ch; margin:0 auto var(--s-4); }
.banda__btns{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.banda__btns .btn{ flex:1 1 250px; max-width:340px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{ background:var(--c-foot); padding:var(--s-6) 0 var(--s-3); border-top:1px solid var(--c-line); }
.foot__in{ display:grid; gap:var(--s-4); }
.foot__logo{ height:38px; width:auto; margin-bottom:var(--s-3); }
.foot h3{ font-size:var(--t-s); text-transform:uppercase; letter-spacing:.12em; color:var(--c-accent); margin:0 0 .8rem; }
.foot__who,.foot__serv{ color:var(--c-txt-soft); font-size:var(--t-s); margin:0 0 .5rem; }
.foot__list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.foot__list a{ color:var(--c-txt-soft); text-decoration:none; font-size:var(--t-s); transition:color .2s; }
.foot__list a:hover{ color:var(--c-accent); }
.foot__bar{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  border-top:1px solid var(--c-line); margin-top:var(--s-5); padding-top:var(--s-3);
}
.foot__bar p{ margin:0; color:var(--c-dim); font-size:var(--t-xs); }
.foot__bar a{ color:var(--c-txt-soft); }
@media (min-width:760px){ .foot__in{ grid-template-columns:1.4fr 1fr 1fr; gap:var(--s-5); } }

/* =====================================================================
   FAB WHATSAPP
   ===================================================================== */
.fab{
  position:fixed; right:16px; bottom:16px; z-index:90;
  width:56px; height:56px; border-radius:var(--r-pill);
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--c-wa),var(--c-wa-deep));
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 6px rgba(37,211,102,.12);
  transition:transform .22s var(--ease), box-shadow .3s;
}
.fab .i{ width:1.7rem; height:1.7rem; }
.fab:hover{ transform:scale(1.07); }
@media (min-width:1000px){ .fab{ right:26px; bottom:26px; } }

/* =====================================================================
   REVEAL — attivo solo con JS, il contenuto resta visibile senza
   ===================================================================== */
.js .reveal{ opacity:0; transform:translateY(16px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .split__air i{ animation:none; }
  .btn:hover,.card:hover,.fab:hover{ transform:none; }
}

/* =====================================================================
   PAGINA PRIVACY
   ===================================================================== */
.doc{ padding:var(--s-6) 0 var(--s-7); }
.doc h1{ font-size:var(--t-xl); margin-bottom:var(--s-2); }
.doc h2{ font-size:var(--t-l); margin:var(--s-5) 0 var(--s-2); }
.doc p, .doc li{ color:var(--c-txt-soft); }
.doc a{ color:var(--c-accent); }
.doc__meta{ font-size:var(--t-s); color:var(--c-dim); margin-bottom:var(--s-4); }
.doc__back{ display:inline-flex; gap:.5rem; align-items:center; margin-top:var(--s-5);
  color:var(--c-accent); text-decoration:none; font-weight:700; }

/* =====================================================================
   INTERRUTTORE TEMA CHIARO / SCURO
   ===================================================================== */
html{ color-scheme:light; }
:root[data-theme="dark"]{ color-scheme:dark; }

.tema{
  display:inline-grid; place-items:center;
  width:40px; height:40px; padding:0; flex:0 0 auto;
  border-radius:var(--r-pill); border:1px solid var(--c-line-2);
  background:var(--c-ghost); color:var(--c-txt); cursor:pointer;
  transition:background-color .22s, transform .18s var(--ease), border-color .22s;
}
.tema:hover{ background:var(--c-ghost-h); transform:translateY(-2px); }
.tema .i{ width:1.15rem; height:1.15rem; }
.tema .i--sole{ display:none; }
:root[data-theme="dark"] .tema .i--sole{ display:block; }
:root[data-theme="dark"] .tema .i--luna{ display:none; }

/* il colore di fondo cambia con calma, così lo scambio non "sbatte" */
body, .nav, .card, .q, .chi__card, .step, .foot{
  transition:background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  body, .nav, .card, .q, .chi__card, .step, .foot{ transition:none; }
  .tema:hover{ transform:none; }
}

/* ---- ritocchi per il tema chiaro ---- */
:root:not([data-theme="dark"]) .split__body{
  border:1px solid var(--c-line);
  box-shadow:0 18px 40px rgba(13,21,38,.16), inset 0 -14px 22px rgba(13,21,38,.05);
}
:root:not([data-theme="dark"]) .hero{
  background:linear-gradient(180deg,var(--c-bg),var(--c-surface-2));
}
:root:not([data-theme="dark"]) .card:hover{ box-shadow:0 14px 34px rgba(13,21,38,.12); }
:root:not([data-theme="dark"]) .fab{ box-shadow:0 12px 30px rgba(13,21,38,.22), 0 0 0 6px rgba(37,211,102,.14); }
:root:not([data-theme="dark"]) .btn--dark{ background:#0d1526; }