/* =====================================================================
   premium.css — stile "premium" condiviso per le pagine interne del sito
   (la homepage ha il suo hero dedicato). Tema CHIARO. header/footer scuri
   restano quelli di style.css. L'accento pagina si imposta con --acc.
   ===================================================================== */
:root{
  --acc:#E50914; --acc-d:#c30811;
  --pgbg:#eef1f5; --card:#ffffff; --cardline:#e4e7ec;
  --ink2:#14181f; --ink-soft:#3a424c; --muted2:#626c77;
  --e1:0 1px 2px rgba(16,20,26,.05),0 3px 10px rgba(16,20,26,.07);
  --e2:0 12px 28px -10px rgba(16,20,26,.16);
}
/* sfondo pagina chiaro premium + testo scuro */
body{background:var(--pgbg) !important;color:var(--ink2) !important;background-image:radial-gradient(60% 40% at 50% -10%,rgba(229,9,20,.04),transparent 60%) !important;background-attachment:fixed}
:root[data-theme="dark"] body{background:var(--pgbg)}

/* SEZIONI = card bianche elevate */
.svc-hero,.blk,.panel,.svc-card,.usato-col,.faq details,.info-row,.hours,.areabox,.about .txt{
  background:var(--card) !important;border:1px solid var(--cardline) !important;border-radius:18px !important;box-shadow:var(--e1) !important}
/* ⚠️ SIMMETRIA: l'imbottitura ORIZZONTALE del riquadro d'apertura deve essere identica a
   quella delle sezioni (24px), altrimenti il titolo in cima parte 2px piu' a destra di tutti
   gli altri titoli della pagina. I riquadri combaciavano gia': era il testo dentro a non farlo. */
.svc-hero{padding:26px 24px 28px !important;margin-top:16px !important}
.blk{padding:24px !important}
.faq details{border-radius:12px !important;margin-bottom:10px !important}

/* testo scuro leggibile */
h1,h2,h3,.sec-h,.svc-hero h1,.faq-q,.faq summary,.rp-model,.rp-title,.rp-data-title{color:var(--ink2) !important}
p,.lead,.blk p,.prose p,.faq details p,.svc-card p,.about .txt p,.info-row p{color:var(--ink-soft) !important}
strong,.lead strong,.blk p strong{color:var(--ink2) !important}
.sub,.prenota-intro,.ucol-head p,.rp-note,.consent,.crumb span{color:var(--muted2) !important}
.crumb a{color:var(--acc)}
.ey{color:#8a929b !important} .ey::before{background:#c8ced5 !important}

/* CHIP pieni con l'accento della pagina */
.fchip,.fchip.red,.fchip.green,.fchip.purple{background:#f4f6f8 !important;color:#14181f !important;border:1px solid #e4e7ec !important}
.fchip svg,.fchip.red svg,.fchip.green svg,.fchip.purple svg{color:var(--acc) !important}

/* PULSANTI = pill pieni NERI (il rosso brand resta solo sui dettagli: icone, em, crumb) */
.btn.primary,.vbtn,.usato-col .btn.primary,.usato-col.buy .vbtn{
  background:#000000 !important;color:#fff !important;border:0 !important;border-radius:999px !important;
  box-shadow:var(--e1) !important;transition:transform .12s ease,background .15s,box-shadow .15s !important}
.btn.primary:hover,.vbtn:hover,.usato-col .btn.primary:hover{background:#222222 !important;color:#fff !important;box-shadow:var(--e2) !important;transform:none !important}
.btn.primary:active,.vbtn:active{transform:scale(.97) !important}
.btn.wa{background:#1FA855 !important;color:#fff !important;border:0 !important;border-radius:999px !important}
.btn.ghost{background:#fff !important;color:var(--ink2) !important;border:1px solid var(--cardline) !important;border-radius:999px !important}

/* form usato: superfici chiare */
.usato-col{--surface:#fff;--surface2:#f4f6f8;--line:#e4e7ec;--text:#14181f;--muted:#626c77;color:var(--ink2) !important}
.usato-col label{color:var(--ink2) !important}
.usato-col input:not([type=range]),.usato-col textarea,.usato-col .mem-sel{background:#f4f6f8 !important;border:1px solid #e4e7ec !important;color:var(--ink2) !important}
.usato-col input::placeholder,.usato-col textarea::placeholder{color:#9aa3ad !important}
.usato-col.buy .ucol-head{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 0 6px !important}
.usato-col.sell .ucol-head{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 0 6px !important}
.usato-col .ucol-head h3,.usato-col .ucol-formhead h4{color:#14181f !important}.usato-col .ucic{color:var(--acc) !important}
.riepilogo{background:#f4f6f8 !important;border:1px solid #e4e7ec !important;color:var(--ink2) !important}

/* elenco "perché" = testo scuro + spunta ROSSA (colore brand) */
.checks li{color:#2a2f36 !important}
.checks li::before{background:rgba(229,9,20,.12) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E50914' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important}

/* feedback tattile */
.btn,.vbtn,.fchip{transition:transform .12s ease,background .15s,box-shadow .15s,filter .15s}

/* DISSOLVENZE allo scroll (tag automatico via premium.js) */
.js-premium .pv-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
.js-premium .pv-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js-premium .pv-reveal{opacity:1 !important;transform:none !important;transition:none}}

/* ===== Componenti redesign "stile VR" condivisi (namespace .v-*) — 2026-07-22 ===== */
.v-ey{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#626c77);text-align:center}
.v-h2{font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:-.02em;font-size:clamp(26px,4vw,38px);margin:6px 0 0;text-align:center;color:var(--text,#14181f)}
.v-h2 span,.v-h2 em{font-style:normal;color:var(--red,#E50914)}
.v-lead{color:var(--muted,#626c77);max-width:580px;margin:12px auto 0;font-size:15px;text-align:center;line-height:1.55}
/* trust grid a icone lineari */
.v-tg{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 0}
.v-ti{text-align:center;position:relative;padding:4px 18px}
@media(min-width:821px){.v-ti:not(:last-child)::after{content:"";position:absolute;top:6px;bottom:6px;right:0;width:1px;background:#e4e7ec}}
.v-ti .ic{width:34px;height:34px;margin:0 auto 12px;color:var(--red,#E50914)}
.v-ti .ic svg{width:100%;height:100%}
.v-ti h3{font-family:'Poppins',sans-serif;font-weight:600;font-size:18px;margin:0;color:var(--text,#14181f)}
.v-ti h3 span{font-weight:600;color:var(--muted,#626c77);font-size:13.5px}
.v-ti p{margin:5px 0 0;color:var(--muted,#626c77);font-size:13px;line-height:1.5}
/* come funziona a step con cerchi pieni rossi */
.v-how .v-steps{display:grid;gap:26px;margin:30px 0 0;text-align:center;grid-template-columns:repeat(var(--vsteps,3),1fr)}
.v-step .circ{width:60px;height:60px;border-radius:50%;background:var(--red,#E50914);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 14px 30px -14px rgba(229,9,20,.7)}
.v-step .circ svg{width:25px;height:25px}
.v-step .lbl{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.14em;font-size:11px;color:var(--red,#E50914);margin:13px 0 0}
.v-step h4{font-family:'Poppins',sans-serif;font-weight:600;font-size:17px;margin:5px 0 0;color:var(--text,#14181f)}
.v-step p{margin:7px auto 0;max-width:250px;color:var(--muted,#626c77);font-size:13.5px;line-height:1.5}
@media(max-width:820px){.v-tg{grid-template-columns:repeat(2,1fr)}.v-how .v-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.v-tg,.v-how .v-steps{grid-template-columns:1fr;max-width:300px;margin-inline:auto}}

/* ===== HERO INTERNO CHIARO (2026-07-22): rimosso l'hero scuro. La sezione .svc-hero
   usa la card bianca di default (definita in cima), coerente con la home chiara. ===== */
.svc-hero h1 em{color:var(--acc)}
.svc-hero .ey{color:#8a929b}

/* ===== DENSITÀ MOBILE (pass senior): meno spazi verticali, form e sezioni compatti ===== */
@media(max-width:600px){
  .svc-hero{padding:18px 15px 18px !important;margin-top:12px !important;border-radius:16px !important}  /* 15px = come .blk qui sotto: sul telefono valeva lo stesso disallineamento */
  .svc-hero .lead{margin-top:10px}
  .blk{padding:16px 15px !important}
  .panel,.usato-col{padding:16px !important}
  .fg{margin-bottom:11px}
  .usato-col .fg{margin-bottom:10px}
  .usato-col input:not([type=range]):not([type=checkbox]),.usato-col textarea,.form-2col input:not([type=range]):not([type=checkbox]),.form-2col textarea{padding:11px 13px}
  .form-2col{gap:16px}
  .info-row,.hours,.areabox{padding:14px 15px !important}
  .faq details{margin-bottom:8px !important}
}