/* ============================================================
   1 — La casa in sezione
   La prima schermata non racconta: fa guardare. Una villetta
   tagliata a metà, e sopra i cinque punti dove i soldi escono.
   Toccarne uno fa due cose insieme — dice cos'è e lo accende,
   cioè lo toglie dal conto. Alla fine della fila restano 370
   euro sui 2.184 di partenza, e nessuno ha dovuto leggere una
   tabella.
   Il disegno è volutamente piatto: due colori, i pezzi che
   contano scuri, il resto appena accennato. Una casa realistica
   avrebbe rubato l'occhio proprio ai cinque punti.
   ============================================================ */
.s1-griglia {
  margin-top: clamp(18px, 2.4vw, 30px);
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 4vw, 64px); align-items: center;
}
.s1-parole h1 { margin-top: 14px; font-size: clamp(34px, 4.4vw, 60px); }
.s1-parole h1 em { font-style: normal; color: var(--green-deep); }
.s1-riga { margin-top: 16px; font-size: 16.5px; color: var(--soft); max-width: 46ch; }
.s1-riga b { color: var(--ink); font-weight: 780; }

/* la carta che parla del punto toccato: una sola, e cambia.
   Cinque cartellini aperti insieme sarebbero un elenco */
.s1-carta {
  margin-top: 22px; padding: 17px 20px;
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 5px 20px 20px 5px;
  box-shadow: 0 40px 60px -50px rgba(34, 58, 60, .9);
  transition: border-left-color .3s;
}
.s1-carta.velata { opacity: 0; }
.s1-carta { transition: opacity .22s, border-left-color .3s; }
.s1-dove { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.s1-nome { display: block; margin-top: 3px; font-size: clamp(20px, 2.2vw, 25px); font-weight: 850; letter-spacing: -.025em; }
.s1-detto { margin-top: 7px; font-size: 15px; line-height: 1.55; color: var(--soft); max-width: 44ch; }
.s1-taglio {
  display: inline-block; margin-top: 12px;
  background: var(--ink); color: var(--sun);
  font-size: 14.5px; font-weight: 850; letter-spacing: -.01em;
  padding: 7px 15px; border-radius: 100px;
}
.s1-taglio.senza { background: var(--sun-soft); color: #8a6410; }

/* il conto: una barra sola che si accorcia. Il numero da solo
   non fa vedere quanto è rimasto rispetto a prima */
.s1-conto { margin-top: 22px; }
.s1-barra {
  height: 12px; border-radius: 100px;
  background: repeating-linear-gradient(90deg, #e4e7dd 0 6px, #eef0e8 6px 12px);
  overflow: hidden;
}
.s1-barra span {
  display: block; height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--ink), #35606a);
  transition: width .7s var(--ease), background .4s;
}
/* piena e scura = quello che paghi oggi; verde e corta = il pezzo
   che stai guardando, quanto vale dentro quella cifra */
.s1-barra span.parte { background: linear-gradient(90deg, var(--green-deep), var(--green)); }
.s1-somma { margin-top: 11px; font-size: 15.5px; color: var(--soft); }
.s1-somma b { color: var(--ink); font-weight: 850; font-size: 18px; font-variant-numeric: tabular-nums; }
.s1-nota { display: block; margin-top: 2px; font-size: 13px; color: var(--soft); opacity: .85; }

/* ---------- la casa ---------- */
.s1-casa { position: relative; aspect-ratio: 640 / 470; }
.s1-disegno { display: block; width: 100%; height: 100%; }

/* la scena in tre dimensioni prende il posto del disegno piatto
   solo se parte davvero: senza scheda video la pagina resta
   quella di prima e non se ne accorge nessuno */
.s1-casa .tela { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.s1-casa.tre .s1-disegno { display: none; }
.s1-casa.tre { cursor: grab; }
.s1-casa.tre.su-seven { cursor: pointer; }

.s1-lato { position: relative; }
.s1-esci {
  position: absolute; left: 50%; bottom: 4px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  font-family: inherit; font-size: 13px; font-weight: 780; color: var(--ink);
  padding: 9px 18px 9px 15px; border-radius: 100px; cursor: pointer;
  box-shadow: 0 18px 30px -20px rgba(34, 58, 60, .9);
  animation: saliTasto .45s var(--ease) both;
  transition: border-color .25s;
}
.s1-esci:hover { border-color: var(--green); }
.s1-esci[hidden] { display: none; }
@keyframes saliTasto { from { opacity: 0; translate: -50% 10px; } }

/* le pastiglie dei punti che non stai guardando si fanno da parte
   invece di sparire: se sparissero, tornando indietro comparirebbero
   di colpo tutte insieme */
.s1-punto.lontano { opacity: .16; pointer-events: none; }
.s1-punto.fuori { opacity: 0; pointer-events: none; }
.s1-punto { transition: scale .3s var(--ease), border-color .3s, background .3s, opacity .4s; }

.pz-corpo { transition: fill .4s, stroke .4s; }
.pz-luce { transition: opacity .5s; }
.pz.acceso .pz-corpo { fill: var(--green-deep); stroke: #1f5a3f; }
.pz-tetto.acceso .pz-luce { opacity: .9; }
.pz-tetto.acceso .pz-corpo { fill: #24484a; }
.pz-caldaia.acceso .pz-corpo { fill: #e4f2ea; stroke: var(--green); }

/* la pastiglia non è centrata sul punto: è il PALLINO che deve
   stare sul pezzo, e il nome gli cresce di fianco. Da qui i due
   versi: a destra per i pezzi che hanno spazio verso il centro,
   a sinistra per quelli attaccati al bordo — se no il nome esce
   dal disegno o finisce sopra quello del pezzo vicino. */
.s1-punto {
  position: absolute; left: var(--x); top: var(--y);
  translate: -15px -50%;
  z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line); border-radius: 100px;
  backdrop-filter: blur(6px);
  font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink);
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 16px 26px -18px rgba(34, 58, 60, .9);
  transition: scale .3s var(--ease), border-color .3s, background .3s;
}
.s1-punto[data-lato="sx"] {
  flex-direction: row-reverse;
  padding: 5px 5px 5px 12px;
  translate: calc(-100% + 15px) -50%;
}
/* sotto il puntatore la pastiglia passa in primo piano: dove i
   nomi si sfiorano, quella che stai guardando vince sulle altre */
.s1-punto:hover, .s1-punto:focus-visible { scale: 1.06; border-color: var(--green); z-index: 5; }
.s1-punto.scelto { z-index: 4; }
.s1-punto i {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--sun-soft);
  position: relative;
  transition: background .3s;
}
/* il pallino di un punto non ancora toccato batte piano: dice
   che c'è qualcosa da fare senza scrivere «clicca qui» */
.s1-punto i::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 50%; background: var(--sun);
  transition: background .3s, transform .3s var(--ease);
}
.s1-punto:not(.acceso) i::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(246, 183, 60, .6);
  animation: battito 2.6s var(--ease) infinite;
}
@keyframes battito {
  0% { box-shadow: 0 0 0 0 rgba(246, 183, 60, .6); }
  55% { box-shadow: 0 0 0 11px rgba(246, 183, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(246, 183, 60, 0); }
}
/* il fornitore è l'unico punto Luce&Gas fra otto di
   efficientamento: la sua pastiglia è piena di sole, come il
   tasto del sito, ed è l'unica — per questo si vede */
.s1-punto.luce { background: var(--sun); border-color: var(--sun); }
.s1-punto.luce i { background: rgba(255, 255, 255, .5); }
.s1-punto.luce i::after { background: var(--ink); }

/* la pastiglia toccata si scurisce e basta: la spunta diceva
   «fatto», e qui non si sta facendo niente — si sta guardando */
.s1-punto.scelto { background: var(--ink); color: #fff; border-color: var(--ink); }
.s1-punto.luce.scelto { background: var(--ink); border-color: var(--ink); }
.s1-punto.luce.scelto i::after { background: var(--sun); }
.s1-punto.scelto i { background: rgba(255, 255, 255, .18); }
.s1-punto.scelto:not(.lontano) i::before { animation: none; }

/* un punto già guardato lo dice (2/10/2026, «non è che si capisca
   molto visivamente quali hai già visto e quali no»): il pallino
   smette di battere e diventa verde pieno, «scoperto», e la pastiglia
   si fa un po' più chiara col nome in grigio. Il giallo che batte
   resta solo sui punti ancora da vedere. Vale per la pastiglia a
   riposo: quella scelta resta scura, le lontane restano trasparenti */
.s1-punto.visto:not(.scelto) i { background: #dcefe4; }
.s1-punto.visto:not(.scelto) i::after { background: var(--green-deep); }
.s1-punto.visto:not(.scelto) i::before { animation: none; }
.s1-punto.visto:not(.scelto):not(.lontano):not(.fuori) {
  background: rgba(255, 255, 255, .78); color: var(--soft); box-shadow: none;
}
.s1-punto.luce.visto:not(.scelto):not(.lontano):not(.fuori) {
  background: rgba(246, 183, 60, .5); border-color: rgba(246, 183, 60, .5);
}
.s1-punto.luce.visto:not(.scelto) i { background: rgba(255, 255, 255, .55); }
.s1-punto.luce.visto:not(.scelto) i::after { background: var(--green-deep); }
.s1-punto.visto:not(.scelto):not(.lontano):not(.fuori):hover,
.s1-punto.visto:not(.scelto):not(.lontano):not(.fuori):focus-visible {
  color: var(--ink); background: rgba(255, 255, 255, .94);
}

/* Seven usa il bordo superiore del form come una vera seduta.
   Il punto di appoggio deriva dalla sua larghezza: resta sul bordo
   anche quando il personaggio cambia scala fra desktop e mobile. */
.modulo-scena-casa {
  --seven-casa-w: clamp(154px, 14vw, 188px);
  position: relative;
  isolation: isolate;
}
.modulo-scena-casa .modulo {
  position: relative;
  z-index: 1;
  overflow: visible;
}
.seven-casa-seduto {
  position: absolute;
  z-index: 2;
  top: calc(var(--seven-casa-w) * -.62);
  right: clamp(18px, 3vw, 38px);
  width: var(--seven-casa-w);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 20px 20px rgba(34, 58, 60, .18));
}
.modulo-scena-casa .mod-occhio,
.modulo-scena-casa .mod-titolo { max-width: calc(100% - var(--seven-casa-w) * .78); }
/* «Analisi gratuita» porta qui: oltre alla testata (base.css), l'aria per la
   testa di Seven, che sporge fino a 19 px sopra la fascia */
#parliamone { scroll-margin-top: 24px; }

@media (max-width: 940px) {
  .s1-griglia { grid-template-columns: 1fr; }
  /* al telefono prima si guarda la casa e poi si legge: il
     disegno è la cosa che invita a toccare. L'ordine va sulla
     cella della griglia, non sul disegno che ci sta dentro:
     messo sul figlio non sposta niente */
  .s1-lato { order: -1; margin-top: 6px; }
  .s1-punto { font-size: 11px; padding: 4px 9px 4px 4px; gap: 6px; }
  .s1-punto i { width: 16px; height: 16px; }
  .s1-carta { min-height: 0; }
  .modulo-scena-casa {
    --seven-casa-w: clamp(132px, 20vw, 166px);
    margin-top: calc(var(--seven-casa-w) * .42);
  }
  .seven-casa-seduto { right: clamp(16px, 4vw, 34px); }
  /* in colonna prima si legge il testo: Seven è più giù, non serve aria */
  #parliamone { scroll-margin-top: 0; }
}
@media (max-width: 720px) {
  .modulo-scena-casa {
    --seven-casa-w: clamp(112px, 31vw, 138px);
    margin-top: calc(var(--seven-casa-w) * .46);
  }
  .seven-casa-seduto { right: 8px; }
  .modulo-scena-casa .mod-occhio,
  .modulo-scena-casa .mod-titolo { max-width: calc(100% - var(--seven-casa-w) * .72); }
}
@media (max-width: 560px) {
  /* sotto questa misura le pastiglie con le parole si accavallano:
     restano i pallini, e il nome lo dice la carta */
  .s1-punto span { display: none; }
  .s1-punto, .s1-punto[data-lato="sx"] { padding: 4px; translate: -14px -50%; }
}

/* ---------- la prima schermata al computer (1/10/2026, scelta A) ----------
   Su uno schermo da 900 punti la casa finiva a 705 e il titolo della sezione
   dopo, a 841, entrava solo scorrendo: 200 punti vuoti e niente che dicesse
   che la pagina continua. Ora la prima sezione è alta quanto lo schermo meno
   la testata (il suo padding più il tasto, comune.css), casa e parole stanno
   al centro e in fondo c'è l'invito, che fa un cenno una volta sola. Al
   telefono non serve: la casa sta sopra e le parole continuano sotto il bordo. */
@media (min-width: 941px) {
  .spina.s1 {
    min-height: calc(100svh - 44px - 2 * clamp(12px, 1.6vw, 18px));
    display: flex; flex-direction: column; justify-content: center;
    padding-bottom: 84px;
  }
  .s1-giu {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13.5px; font-weight: 700; color: var(--soft); text-decoration: none;
    transition: color .25s;
  }
  .s1-giu:hover { color: var(--ink); }
  .s1-giu i {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--white); border: 1.5px solid var(--line); color: var(--ink);
    animation: s1-cenno 1.3s var(--ease) .9s 1;
  }
  @keyframes s1-cenno { 0%, 100% { transform: none; } 50% { transform: translateY(7px); } }
}
@media (max-width: 940px) { .s1-giu { display: none; } }
@media (prefers-reduced-motion: reduce) { .s1-giu i { animation: none; } }