/* =========================================================================
   SVOLTA SOLARE — stili della landing
   Caricato solo sulle pagine che usano il template "Landing Svolta Solare".

   Impianto: il documento. Il ritmo della pagina imita la lettura di una
   bolletta — fasce alternate come righe di tabella, allineamento a
   sinistra, filetti sottili, numeri in tabellare. L'unico elemento
   acceso è il segno dell'evidenziatore, usato una volta sola.

   Tutto è sotto .sv-landing per non toccare il resto del sito.
   ========================================================================= */

/* ----------------------------------------------------------------------
   Struttura
   ---------------------------------------------------------------------- */

.sv-landing { background: var(--sv-paper); }

.sv-skip {
  position: absolute;
  left: -9999px;
}
.sv-skip:focus {
  left: var(--s-2);
  top: var(--s-2);
  z-index: 100;
  background: var(--sv-ink);
  color: #fff;
  padding: var(--s-1) var(--s-2);
}

.sv-shell {
  width: 100%;
  max-width: var(--sv-shell);
  margin-inline: auto;
  padding-inline: var(--s-3);
}

@media (min-width: 48em) {
  .sv-shell { padding-inline: var(--s-4); }
}

/* Barra superiore: logo e, se serve, telefono. Nessuna navigazione. */
.sv-topbar {
  border-bottom: 1px solid var(--sv-line);
  background: var(--sv-paper);
}
.sv-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 60px;
}
.sv-topbar__logo img { display: block; height: 32px; width: auto; }

.sv-wordmark {
  font-family: var(--sv-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--sv-ink);
}

.sv-topbar__phone {
  font-family: var(--sv-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--sv-ink);
  text-decoration: none;
  white-space: nowrap;
}
.sv-topbar__phone:hover { color: var(--sv-cta); }

/* Piede: solo gli obblighi di legge. */
.sv-foot {
  border-top: 1px solid var(--sv-line);
  padding-block: var(--s-4);
  color: var(--sv-slate);
  font-size: var(--t-sm);
}
.sv-foot__line { margin: 0 0 var(--s-1); max-width: none; }
.sv-foot a { color: var(--sv-slate); margin-right: var(--s-2); }


/* ----------------------------------------------------------------------
   Sezioni e ritmo verticale
   Le fasce alternate non sono decorazione: segnano il passaggio da un
   blocco di ragionamento al successivo, come le righe di una tabella.
   ---------------------------------------------------------------------- */

.sv-section {
  padding-block: var(--s-5);
}
@media (min-width: 48em) {
  .sv-section { padding-block: var(--s-7); }
}

.sv-section--rule  { background: var(--sv-rule); }
.sv-section--ink   { background: var(--sv-ink); color: #fff; }
.sv-section--ink :is(h1,h2,h3,h4) { color: #fff; }
.sv-section--ink p { color: #D7DFEA; }
.sv-section--tight { padding-block: var(--s-4); }

.sv-lede {
  font-size: var(--t-lg);
  color: var(--sv-slate);
  max-width: 54ch;
  margin-block: var(--s-2) 0;
}
.sv-section--ink .sv-lede { color: #B9C6D8; }

.sv-h2 { font-size: var(--t-2xl); margin: 0; max-width: 20ch; }


/* ----------------------------------------------------------------------
   Hero
   Colonna di testo a sinistra, estratto di bolletta a destra. Il primo
   schermo mostra un documento, non uno stock photo di pannelli.
   ---------------------------------------------------------------------- */

.sv-hero { padding-block: var(--s-5) var(--s-5); }

.sv-hero__grid {
  display: grid;
  gap: var(--s-4);
  align-items: start;
}
@media (min-width: 60em) {
  .sv-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--s-6);
    align-items: center;
  }
  .sv-hero { padding-block: var(--s-6) var(--s-7); }
}

.sv-hero__title {
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 15ch;
}

.sv-hero__sub {
  font-size: var(--t-lg);
  color: var(--sv-slate);
  max-width: 46ch;
  margin: var(--s-3) 0 0;
}

.sv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.sv-hero__reassure {
  font-size: var(--t-sm);
  color: var(--sv-slate);
  margin: var(--s-2) 0 0;
}


/* ----------------------------------------------------------------------
   L'estratto di bolletta — l'elemento forte della pagina
   Un solo punto acceso in tutto il progetto: la riga marcata.
   ---------------------------------------------------------------------- */

.sv-bill {
  background: var(--sv-paper);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius);
  box-shadow: 0 1px 0 var(--sv-line), 0 18px 40px -28px rgba(22, 35, 58, .45);
  overflow: hidden;
}

.sv-bill__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--sv-line);
  background: var(--sv-rule);
}
.sv-bill__title {
  font-family: var(--sv-body);
  font-weight: 600;
  font-size: var(--t-sm);
  margin: 0;
  color: var(--sv-ink);
}
.sv-bill__meta {
  font-family: var(--sv-mono);
  font-size: var(--t-xs);
  color: var(--sv-slate);
}

.sv-bill__rows { margin: 0; padding: 0; list-style: none; }

.sv-bill__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  padding: .7rem var(--s-3);
  border-bottom: 1px solid var(--sv-line);
  max-width: none;
}
.sv-bill__row:last-child { border-bottom: 0; }

.sv-bill__label { font-size: var(--t-sm); color: var(--sv-slate); }
.sv-bill__value { font-size: var(--t-sm); color: var(--sv-ink); }

/* La riga marcata. Il tratto giallo parte da sinistra come una
   sottolineatura fatta a mano, non è un blocco di fondo pieno. */
.sv-bill__row--marked {
  position: relative;
  background: linear-gradient(
    to right,
    rgba(255, 212, 0, .40) 0%,
    rgba(255, 212, 0, .40) 92%,
    rgba(255, 212, 0, 0) 100%
  );
  box-shadow: inset 3px 0 0 var(--sv-marker);
}
.sv-bill__row--marked .sv-bill__label { color: var(--sv-ink); font-weight: 600; }
.sv-bill__row--marked .sv-bill__value { font-weight: 500; }

/* Nota a margine: la voce del consulente sul documento. */
.sv-bill__note {
  padding: var(--s-2) var(--s-3) var(--s-3);
  border-top: 1px solid var(--sv-line);
  background: var(--sv-rule);
  font-size: var(--t-sm);
  color: var(--sv-ink);
}
.sv-bill__note p { margin: 0; max-width: 40ch; }


/* ----------------------------------------------------------------------
   Bottoni
   ---------------------------------------------------------------------- */

.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--sv-body);
  font-weight: 600;
  font-size: var(--t-base);
  line-height: 1.2;
  padding: .95rem 1.6rem;
  min-height: 52px;             /* area di tocco reale su mobile */
  background: var(--sv-cta);
  color: #fff;
  border: 1px solid var(--sv-cta);
  border-radius: var(--sv-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.sv-btn:hover,
.sv-btn:focus { background: var(--sv-cta-hi); border-color: var(--sv-cta-hi); color: #fff; }

.sv-btn--ghost {
  background: transparent;
  color: var(--sv-ink);
  border-color: var(--sv-line);
}
.sv-btn--ghost:hover { background: var(--sv-rule); color: var(--sv-ink); border-color: var(--sv-ink); }

.sv-btn--full { width: 100%; }


/* ----------------------------------------------------------------------
   Barra di credibilità
   ---------------------------------------------------------------------- */

.sv-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-3);
  border-block: 1px solid var(--sv-line);
  list-style: none;
  margin: 0;
}
.sv-trust li {
  display: flex;
  align-items: baseline;
  gap: .5em;
  font-size: var(--t-sm);
  color: var(--sv-slate);
  max-width: none;
}
.sv-trust b {
  font-family: var(--sv-mono);
  font-weight: 500;
  font-size: var(--t-base);
  color: var(--sv-ink);
  font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------------------------
   Griglie di contenuto
   ---------------------------------------------------------------------- */

.sv-grid {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
@media (min-width: 42em)  { .sv-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em)  { .sv-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Blocchi separati da filetti, non da schede con ombra:
   è un documento, e le schede tutte uguali sono la resa più generica. */
.sv-item {
  padding-top: var(--s-3);
  border-top: 2px solid var(--sv-ink);
}
.sv-item h3 { margin: 0 0 var(--s-1); font-size: var(--t-lg); }
.sv-item p  { margin: 0; color: var(--sv-slate); font-size: var(--t-base); }
.sv-section--ink .sv-item { border-top-color: var(--sv-marker); }


/* ----------------------------------------------------------------------
   Metodo S.O.L.E.
   Qui la numerazione è legittima: è una sequenza reale di quattro fasi.
   ---------------------------------------------------------------------- */

.sv-steps { list-style: none; margin: var(--s-4) 0 0; padding: 0; counter-reset: sole; }

.sv-step {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: var(--s-2) var(--s-3);
  padding-block: var(--s-3);
  border-top: 1px solid var(--sv-line);
  max-width: none;
}
.sv-step:last-child { border-bottom: 1px solid var(--sv-line); }

.sv-step__letter {
  font-family: var(--sv-display);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--sv-ink);
  padding-top: .1em;
}
.sv-step h3 { margin: 0 0 .3rem; font-size: var(--t-lg); }
.sv-step p  { margin: 0; color: var(--sv-slate); }


/* ----------------------------------------------------------------------
   FAQ — usa <details>, funziona senza JavaScript
   ---------------------------------------------------------------------- */

.sv-faq { margin-top: var(--s-4); border-top: 1px solid var(--sv-line); }

.sv-faq details {
  border-bottom: 1px solid var(--sv-line);
}
.sv-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  font-family: var(--sv-body);
  font-weight: 600;
  font-size: var(--t-base);
  cursor: pointer;
  list-style: none;
}
.sv-faq summary::-webkit-details-marker { display: none; }

.sv-faq summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--sv-ink);
  border-bottom: 2px solid var(--sv-ink);
  transform: rotate(45deg) translateY(-25%);
  transition: transform .18s ease;
}
.sv-faq details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }

.sv-faq details > *:not(summary) { padding-bottom: var(--s-3); color: var(--sv-slate); }


/* ----------------------------------------------------------------------
   Blocco form
   ---------------------------------------------------------------------- */

.sv-form { scroll-margin-top: var(--s-4); }
.sv-form__frame {
  margin-top: var(--s-3);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius);
  background: var(--sv-paper);
  overflow: hidden;
}
.sv-form__frame iframe { display: block; width: 100%; border: 0; }


/* ----------------------------------------------------------------------
   Barra CTA fissa su mobile
   Compare dopo il primo schermo. Su desktop non serve: la CTA è già
   ripetuta nel flusso della pagina.
   ---------------------------------------------------------------------- */

.sv-ctabar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  padding: .6rem var(--s-3) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--sv-line);
  transform: translateY(110%);
  transition: transform .22s ease;
}
.sv-ctabar[data-visible="true"] { transform: translateY(0); }
.sv-ctabar[hidden] { display: none; }

@media (min-width: 60em) {
  .sv-ctabar { display: none; }
}

/* Lo spazio in fondo evita che la barra copra il piede della pagina. */
@media (max-width: 59.99em) {
  .sv-landing .sv-foot { padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom)); }
}


/* ----------------------------------------------------------------------
   Utility minime
   ---------------------------------------------------------------------- */

.sv-mt-2 { margin-top: var(--s-2); }
.sv-mt-3 { margin-top: var(--s-3); }
.sv-mt-4 { margin-top: var(--s-4); }
.sv-narrow { max-width: 34rem; }


/* ----------------------------------------------------------------------
   Rete di sicurezza
   Se un paragrafo vuoto finisse comunque dentro il contenuto (incollando
   una sezione dall'editor visuale, per esempio), non deve diventare una
   cella della griglia e rubare una colonna.
   ---------------------------------------------------------------------- */

.sv-landing p:empty,
.sv-landing br:only-child { display: none; }

.sv-hero__grid > p:empty,
.sv-grid > p:empty,
.sv-steps > p:empty { display: none; }