/* enerdata - landing Teleletture: la sola telelettura dei contatori.
   Stili comuni alle cinque varianti: base, la scena animata della chiamata
   GSM (la stessa di duale/flusso-telelettura.html), le sezioni che tornano in
   tutte e il "pannello" dei contatori in lettura. Ogni pagina ha in testa solo
   la propria impaginazione. Nessuna classe di ed.css. */

:root {
  --ink: #1d1d1f;
  --ink2: #5f6470;
  --ink3: #8a8f99;
  --paper: #fff;
  --mist: #f4f6f9;
  --line: #d9dde4;
  --blue: #206bc4;
  --blue-d: #1a569d;
  --cyan: #29abe2;
  --azure: #4299e1;
  --teal: #0ca678;
  --amber: #f59f00;
  --red: #d63939;
  --green: #2fb344;
  --navy: #0e2c58;
  --navy-x: #04101f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--paper);
  font-size: 17px; line-height: 1.47;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.center { text-align: center; }

/* --- barra in alto --------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 56px; }
.nav .marchio { height: 20px; width: auto; }
.nav .prodotto-nome { font-size: 13px; font-weight: 600; color: var(--blue); padding-left: 14px; border-left: 1px solid var(--line); }
.nav .voci { display: flex; gap: 26px; margin-left: auto; font-size: 13px; }
.nav .voci a { color: var(--ink); opacity: .82; white-space: nowrap; }
.nav .prodotto-nome, .nav .btn { white-space: nowrap; }
.nav .voci a:hover { color: var(--blue); opacity: 1; }

/* --- bottoni --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 980px; padding: 13px 24px;
  font-size: 16px; font-weight: 500; line-height: 1;
  background: var(--blue); color: #fff; transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 12px 28px -14px rgba(32, 107, 196, .8);
}
.btn:hover { background: var(--blue-d); transform: translateY(-1px); }
.btn .ti { font-size: 18px; }
.btn.piccolo { padding: 8px 15px; font-size: 13px; box-shadow: none; }
.btn.chiaro { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.btn.chiaro:hover { background: rgba(32, 107, 196, .06); }
.altro { font-size: 17px; color: var(--blue); white-space: nowrap; }
.altro::after { content: " \203A"; }
.altro:hover { text-decoration: underline; }
.bottoni { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 32px; }
.center .bottoni { justify-content: center; }

/* --- testi ----------------------------------------------------------------- */
.eti {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 11px; border-radius: 999px;
  background: rgba(32, 107, 196, .08); color: var(--blue); font-size: 13px; font-weight: 600; letter-spacing: .01em;
}
.eti::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
  animation: ed-ping 1.8s ease-out infinite;
}
@keyframes ed-ping { 0% { box-shadow: 0 0 0 0 rgba(12, 166, 120, .55); } 100% { box-shadow: 0 0 0 10px rgba(12, 166, 120, 0); } }
.occhiello { font-size: 15px; font-weight: 600; color: var(--blue); margin-bottom: 12px; letter-spacing: .005em; }
.t1 { font-size: clamp(44px, 7vw, 84px); line-height: 1.03; font-weight: 700; letter-spacing: -.038em; }
.t2 { font-size: clamp(34px, 5vw, 58px); line-height: 1.06; font-weight: 700; letter-spacing: -.032em; }
.t3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.18; font-weight: 700; letter-spacing: -.02em; }
.t1 em, .t2 em, .t3 em { font-style: normal; color: var(--blue); }
.lead { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.42; color: var(--ink2); margin-top: 20px; max-width: 760px; }
.center .lead { margin-left: auto; margin-right: auto; }

/* --- sezioni --------------------------------------------------------------- */
.sez { padding: 130px 0; }
.sez.nebbia { background: var(--mist); }
.sez.stretta { padding: 90px 0; }

/* --- i numeri della hero --------------------------------------------------- */
.fatti { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.fatto b { display: block; font-size: clamp(40px, 4.6vw, 58px); font-weight: 700; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.fatto span { display: block; margin-top: 8px; font-size: 14px; color: var(--ink2); line-height: 1.35; }

/* --- la cornice per le schermate ------------------------------------------ */
.cornice {
  border-radius: 14px; background: #fff; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(16, 33, 66, .38), 0 0 0 1px rgba(0, 0, 0, .06);
}
.cornice .barra {
  height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 12px;
  background: #f1f2f5; border-bottom: 1px solid #e3e5ea;
}
.cornice .barra i { width: 11px; height: 11px; border-radius: 50%; background: #d4d6dc; }
.cornice .barra span {
  margin: 0 auto; transform: translateX(-24px);
  font-size: 11px; color: var(--ink3); background: #fff; border-radius: 6px; padding: 2px 46px;
}
/* la cornice che si apre mentre la si raggiunge (tele.js, [data-scala]) */
.scala { transform-origin: 50% 0; will-change: transform; }
.pila { display: grid; }
.pila > * { grid-area: 1 / 1; opacity: 0; transition: opacity .6s ease; }
.pila > .on { opacity: 1; }

/* le schede (curve, registri, a confronto): tasti a pillola, testo sotto */
.schede-tasti { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--mist); }
.nebbia .schede-tasti { background: #fff; }
.schede-tasti button {
  border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500;
  padding: 9px 18px; border-radius: 999px; cursor: pointer; color: var(--ink2); transition: background .2s, color .2s;
}
.schede-tasti button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(16, 33, 66, .12); }
.nebbia .schede-tasti button.on { background: var(--blue); color: #fff; }
.schede-testi p { display: none; font-size: 16px; color: var(--ink2); }
.schede-testi p.on { display: block; animation: ed-entra .5s ease; }
@keyframes ed-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* la richiesta di telelettura, rifatta in piccolo ([data-richiesta], mossa da
   tele.js): si scelgono i contatori, si apre "Lettura - contatori" con il
   periodo, si mette in coda e le righe arrivano a completata. Stessa
   proporzione delle schermate, testi in cqw; angoli come nell'app (2px). */
.rqd {
  position: relative; aspect-ratio: 3120 / 1400; container-type: inline-size; overflow: hidden;
  background: #fff; text-align: left; font-family: "Segoe UI", Inter, Arial, sans-serif; color: #16202e;
}
.rqd .ti { font-size: inherit; }
.rqd-top { display: flex; align-items: center; gap: 2.2cqw; height: 4cqw; padding: 0 1.6cqw; background: #0f2a4f; color: rgba(255, 255, 255, .68); font-size: 1.05cqw; }
.rqd-top img { height: 1.45cqw; width: auto; margin-right: 1cqw; }
.rqd-top .on { color: #fff; font-weight: 600; }
.rqd-sub { display: flex; align-items: center; gap: 1.4cqw; height: 3.6cqw; padding: 0 1.6cqw; border-bottom: 1px solid #e6ebf1; font-size: 1.05cqw; }
.rqd-sub b { font-size: 1.25cqw; }
.rqd-sel { color: #8b95a3; }
.rqd-azione {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5cqw; padding: .5cqw 1.1cqw;
  border-radius: 2px; border: 1px solid #cbd5e1; color: var(--blue); font-weight: 600; transition: background .3s, color .3s;
}
.rqd[data-fase="modale"] .rqd-azione, .rqd[data-fase="premi"] .rqd-azione { background: var(--blue); border-color: var(--blue); color: #fff; }
.rqd-lista { padding: 0 1.6cqw; }
.rqd-riga {
  display: grid; grid-template-columns: 1.6cqw 1fr 7cqw 9cqw; align-items: center; gap: 1.2cqw;
  height: 4.4cqw; padding: 0 .6cqw; border-bottom: 1px solid #f0f2f5; font-size: 1.15cqw; transition: background .3s;
}
.rqd-riga b { font-weight: 600; }
.rqd-riga > span { color: #8b95a3; font-size: 1cqw; }
.rqd-check { position: relative; width: 1.3cqw; height: 1.3cqw; border: 1.5px solid #cbd5e1; border-radius: 2px; transition: background .2s, border-color .2s; }
.rqd-riga.sel { background: #f1f7fe; }
.rqd-riga.sel .rqd-check { background: var(--blue); border-color: var(--blue); }
.rqd-riga.sel .rqd-check::after {
  content: ""; position: absolute; left: 32%; top: 10%; width: 28%; height: 55%;
  border: solid #fff; border-width: 0 .22cqw .22cqw 0; transform: rotate(45deg);
}
.rqd-riga > .rqd-esito { justify-self: end; font-size: .95cqw; font-weight: 600; padding: .3cqw .7cqw; border-radius: 2px; }
.rqd-riga > .rqd-esito.coda { background: #f1f3f6; color: #5a6478; }
.rqd-riga > .rqd-esito.corso { background: #e7f0fb; color: var(--blue); }
.rqd-riga > .rqd-esito.fatta { background: #e6f7ec; color: #2b8a3e; }
.rqd-modale {
  position: absolute; right: 3cqw; top: 9.5cqw; width: 36cqw; padding: 1.6cqw; background: #fff; border-radius: 2px;
  box-shadow: 0 2cqw 5cqw -1.5cqw rgba(16, 33, 66, .45), 0 0 0 1px rgba(0, 0, 0, .08);
  opacity: 0; transform: translateY(1.2cqw); transition: opacity .4s, transform .4s; pointer-events: none;
}
.rqd[data-fase="modale"] .rqd-modale, .rqd[data-fase="premi"] .rqd-modale { opacity: 1; transform: none; }
.rqd-mt { display: flex; align-items: center; gap: .6cqw; padding-bottom: 1cqw; border-bottom: 1px solid #e6ebf1; font-size: 1.3cqw; font-weight: 700; }
.rqd-mt .ti { color: var(--blue); font-size: 1.5cqw; }
.rqd-nota { margin: 1cqw 0 .4cqw; font-size: .95cqw; line-height: 1.45; color: #475467; }
.rqd-bi { display: flex; align-items: center; gap: .8cqw; margin-top: .8cqw; font-size: 1.05cqw; color: #8b95a3; }
.rqd-bi .on { color: #16202e; font-weight: 600; }
.rqd-sw { position: relative; width: 3cqw; height: 1.7cqw; border-radius: .85cqw; background: #339af0; }
.rqd-sw::after { content: ""; position: absolute; top: .15cqw; left: .15cqw; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .28); }
.rqd-periodo { display: flex; gap: 1cqw; margin-top: 1.2cqw; }
.rqd-periodo label { flex: 1; display: flex; flex-direction: column; gap: .35cqw; font-size: .8cqw; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #8b95a3; }
.rqd-periodo label span { border: 1px solid #cbd5e1; border-radius: 2px; padding: .55cqw .8cqw; font-size: 1.05cqw; font-weight: 500; text-transform: none; letter-spacing: 0; color: #16202e; }
.rqd-piede { display: flex; justify-content: flex-end; gap: .8cqw; margin-top: 1.4cqw; font-size: 1.05cqw; }
.rqd-piede span { padding: .55cqw 1.1cqw; border-radius: 2px; border: 1px solid #cbd5e1; }
.rqd-piede .rqd-vai { display: inline-flex; align-items: center; gap: .5cqw; background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; transition: transform .15s, box-shadow .15s; }
.rqd[data-fase="premi"] .rqd-vai { transform: scale(.94); box-shadow: 0 0 0 .5cqw rgba(32, 107, 196, .25); }

/* ===========================================================================
   LA SCENA: enerdata chiama i contatori via GSM
   Contatori a sinistra, enerdata al centro, cosa ne esce a destra. I fili e i
   dati in viaggio stanno in un SVG (si scala da solo); le schede sono HTML in
   percentuale con testi in cqw. La muove tele.js ([data-gsm]): lo stato di
   ogni contatore e' data-stato (riposo, chiama, linea, letto, errore).
   =========================================================================== */
.flusso-scena { position: relative; max-width: 1100px; margin: 64px auto 0; aspect-ratio: 1100 / 500; container-type: inline-size; }
.flusso-scena > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flusso-scena .filo { fill: none; stroke: #d5deea; stroke-width: 2; }
.flusso-scena .filo-vivo { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 2 12; opacity: 0; transition: opacity .3s; animation: ed-scorre 1.2s linear infinite; }
.flusso-scena .filo-vivo.esce { stroke: var(--teal); }
.flusso-scena .filo-vivo.acceso { opacity: .5; }
.flusso-scena .filo-vivo.guasto { stroke: var(--red); }
@keyframes ed-scorre { to { stroke-dashoffset: -14; } }
.pacco .c { fill: #fff; stroke: var(--blue); stroke-width: 1.5; }
.pacco .pin { fill: var(--blue); }
.pacco text { font: 600 12px Inter, "Segoe UI", sans-serif; fill: var(--ink); }
.pacco.esce .c { stroke: var(--teal); }
.pacco.esce .pin { fill: var(--teal); }
.pacco.chiama .c { stroke: var(--amber); fill: #fff8eb; }
.pacco.chiama .pin { fill: var(--amber); }
.pacco.guasto .c { stroke: var(--red); fill: #fff5f5; }
.pacco.guasto .pin { fill: var(--red); }

.nodo {
  position: absolute; width: 20.9%; height: 13.2%; display: flex; align-items: center; gap: 1cqw;
  padding: 0 1.3cqw; background: #fff; border-radius: 1.3cqw; text-align: left;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 12px 30px -18px rgba(16, 33, 66, .4);
}
.nodo .ti { font-size: 2.2cqw; color: var(--blue); flex: none; }
.nodo.uscita .ti { color: var(--teal); }
.nodo b { display: block; font-size: 1.45cqw; font-weight: 600; color: var(--ink); line-height: 1.2; }
.nodo span { display: block; font-size: 1.08cqw; color: var(--ink2); line-height: 1.3; }

/* il contatore: la spia GSM e le onde radio dicono a che punto e' la chiamata */
.nodo.contatore { transition: opacity .4s, box-shadow .4s; }
.nodo.contatore[data-stato="riposo"] { opacity: .5; }
.nodo .modello { white-space: nowrap; font-size: 1.45cqw; font-weight: 600; color: var(--ink); line-height: 1.2; display: block; }
.nodo .gsm { display: flex; align-items: center; gap: .55cqw; white-space: nowrap; transition: color .3s; }
.nodo .gsm i { flex: none; width: .8cqw; height: .8cqw; border-radius: 50%; background: #c9d2de; transition: background .3s; }
.contatore[data-stato="chiama"] .gsm i { background: var(--amber); animation: ed-lampo .6s ease-in-out infinite; }
.contatore[data-stato="linea"] .gsm i { background: var(--green); box-shadow: 0 0 0 .35cqw rgba(47, 179, 68, .18); animation: ed-lampo .35s ease-in-out infinite; }
.contatore[data-stato="letto"] .gsm i { background: var(--green); }
.contatore[data-stato="errore"] .gsm i { background: var(--red); }
.contatore[data-stato="errore"] .gsm, .contatore[data-stato="errore"] .ti { color: var(--red); }
.nodo.contatore[data-stato="errore"] { box-shadow: 0 0 0 1.5px rgba(214, 57, 57, .5), 0 12px 30px -18px rgba(16, 33, 66, .4); }
.nodo.contatore .ti { position: relative; }
.nodo.contatore .ti::after { content: ""; position: absolute; inset: -.45cqw; border-radius: 50%; border: 2px solid transparent; opacity: 0; }
.contatore[data-stato="chiama"] .ti::after { border-color: var(--amber); animation: ed-onda .9s ease-out infinite; }
.contatore[data-stato="linea"] .ti::after { border-color: var(--green); animation: ed-onda .9s ease-out infinite; }
@keyframes ed-lampo { 50% { opacity: .25; } }
@keyframes ed-onda { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.8); } }

/* la scheda d'uscita si accende quando le arriva il dato */
.nodo.uscita { transition: box-shadow .3s; }
.nodo.uscita.arriva { box-shadow: 0 0 0 2px rgba(12, 166, 120, .5), 0 12px 30px -18px rgba(16, 33, 66, .4); }
.nodo.uscita.arriva.guasto { box-shadow: 0 0 0 2px rgba(214, 57, 57, .5), 0 12px 30px -18px rgba(16, 33, 66, .4); }

/* la curva giornaliera: la giornata si riempie a pezzi, poi riparte da vuota */
.nodo.con-grafico > div, .nodo.con-registri > div { flex: 1; min-width: 0; }
.ed-mini { display: block; width: 100%; height: 2.7cqw; margin-top: .5cqw; overflow: visible; }
.ed-mini .asse { stroke: #dfe6ee; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ed-mini .area { fill: url(#ed-mini-fondo); }
.ed-mini .profilo { fill: none; stroke: var(--azure); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ed-mini .cursore { stroke: var(--azure); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; }

/* i registri mensili: lettura, scelta del registro dell'immessa, kWh */
.ed-reg { display: flex; align-items: center; gap: .4cqw; margin-top: .45cqw; }
.nodo .ed-reg span { display: inline-flex; align-items: center; line-height: 1; }
.nodo .ed-reg .ed-reg-tag {
  padding: .3cqw .45cqw; border-radius: .4cqw; background: #eef2f7; color: var(--ink3);
  font-size: .9cqw; font-weight: 600; transition: background .2s, color .2s, opacity .2s;
}
.nodo .ed-reg .ed-reg-tag[data-stato="letto"] { background: #e3eefb; color: var(--blue); animation: ed-lampo .3s ease-in-out infinite; }
.nodo .ed-reg .ed-reg-tag[data-stato="scelto"] { background: var(--blue); color: #fff; }
.nodo .ed-reg .ed-reg-tag[data-stato="scartato"] { opacity: .35; text-decoration: line-through; }
.nodo .ed-reg .ed-reg-kwh { margin-left: auto; font-size: 1.1cqw; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ed-reg-chi { margin-top: .35cqw; font-size: .95cqw; color: var(--ink2); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* enerdata al centro */
.cuore {
  position: absolute; left: 40.45%; top: 30%; width: 19.09%; height: 40%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqw;
  border-radius: 2.4cqw; background: linear-gradient(160deg, var(--navy), var(--navy-x));
  box-shadow: 0 30px 60px -25px rgba(16, 33, 66, .6);
}
.cuore img { width: 72%; }
.cuore small { font-size: 1.1cqw; color: #9fd3f3; letter-spacing: .02em; }
.cuore::before {
  content: ""; position: absolute; inset: -1.2cqw; border-radius: 3.2cqw;
  border: 2px solid rgba(32, 107, 196, .35); animation: ed-respira 2.8s ease-out infinite;
}
@keyframes ed-respira { 0% { transform: scale(.96); opacity: .9; } 100% { transform: scale(1.1); opacity: 0; } }
.cuore .stati { display: flex; flex-direction: column; align-items: center; gap: .3cqw; text-align: center; }
.cuore .stati .fatte { color: #5ee0b0; }
.cuore .stati .guasti { color: #ff8f8f; }

/* la scena stretta (.flusso-scena.stretta): per una colonna di circa 800 px,
   accanto al titolo. Stessa scena, disegnata su 820x560 (fili piu' corti,
   schede piu' larghe): nell'HTML i fili e le posizioni sono quelli stretti, qui
   le misure delle schede e i testi in cqw, ingranditi perche' restino leggibili */
.flusso-scena.stretta { aspect-ratio: 820 / 560; margin: 0; }
.stretta .nodo { width: 24.39%; height: 12.14%; gap: 1.2cqw; padding: 0 1.6cqw; border-radius: 1.6cqw; }
.stretta .nodo .ti { font-size: 2.9cqw; }
.stretta .nodo b, .stretta .nodo .modello { font-size: 1.6cqw; }
.stretta .nodo span { font-size: 1.25cqw; }
.stretta .nodo .gsm { gap: .7cqw; }
.stretta .nodo .gsm i { width: 1cqw; height: 1cqw; }
.stretta .nodo.contatore .ti::after { inset: -.6cqw; }
.stretta .ed-mini { height: 3.3cqw; margin-top: .6cqw; }
.stretta .ed-reg { gap: .5cqw; margin-top: .55cqw; }
.stretta .nodo .ed-reg .ed-reg-tag { font-size: 1.1cqw; padding: .35cqw .55cqw; border-radius: .5cqw; }
.stretta .nodo .ed-reg .ed-reg-kwh { font-size: 1.3cqw; }
.stretta .ed-reg-chi { font-size: 1.1cqw; margin-top: .45cqw; }
/* enerdata al centro: rettangolo orizzontale (200x140 sui 820x560), non quadrato */
.stretta .cuore { left: 37.8%; top: 37.5%; width: 24.39%; height: 25%; gap: 1.4cqw; border-radius: 2.6cqw; }
.stretta .cuore img { width: 70%; }
.stretta .pacco text { font-size: 11px; }
.stretta .cuore small { font-size: 1.35cqw; }
.stretta .cuore::before { inset: -1.4cqw; border-radius: 4cqw; }

/* le tre tappe sotto la scena */
.tappe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 60px; text-align: left; }
.tappa b {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 12px;
  border-radius: 50%; background: var(--blue); color: #fff; font-size: 14px;
}
.tappa h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.tappa p { font-size: 15px; color: var(--ink2); }

/* la scena in verticale (.verticale, la mette tele.js sotto i 700 px): disegnata
   su 400x470, contatori in fila in alto, enerdata al centro con Stato ed Excel
   ai lati, curva giornaliera e registri sotto. Stesso motore e stessi stati,
   testi in cqw piu' grandi perche' restino leggibili sul telefono */
.flusso-scena.verticale { aspect-ratio: 400 / 470; max-width: 460px; margin: 44px auto 0; }
.flusso-scena.verticale .nodo { gap: 1.6cqw; padding: 0 2.4cqw; border-radius: 3cqw; }
.flusso-scena.verticale .nodo .ti { font-size: 4.6cqw; }
.flusso-scena.verticale .nodo b { font-size: 3.1cqw; }
.flusso-scena.verticale .nodo span { font-size: 2.5cqw; }
/* i contatori: icona sopra, nome su due righe, la spia GSM in alto a destra */
.flusso-scena.verticale .nodo.contatore { width: 23%; height: 18.3%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1cqw; padding: 0 2.2cqw; }
.flusso-scena.verticale .nodo .modello { white-space: normal; font-size: 2.8cqw; line-height: 1.2; }
.flusso-scena.verticale .nodo .gsm { position: absolute; top: 2.4cqw; right: 2.4cqw; }
.flusso-scena.verticale .nodo .gsm i { width: 2.2cqw; height: 2.2cqw; }
.flusso-scena.verticale .gsm-testo { display: none; }
.flusso-scena.verticale .nodo.contatore .ti::after { inset: -1cqw; }
/* Stato ed Excel ai lati di enerdata: icona e titolo */
.flusso-scena.verticale .nodo.uscita { width: 21%; height: 14.89%; flex-direction: column; justify-content: center; gap: .8cqw; padding: 0 1.6cqw; text-align: center; }
.flusso-scena.verticale .nodo.uscita > div > span { display: none; }
.flusso-scena.verticale .nodo.uscita b { font-size: 2.7cqw; }
/* curva giornaliera e registri sotto, larghi */
.flusso-scena.verticale .nodo.con-grafico, .flusso-scena.verticale .nodo.con-registri { width: 48%; height: 18.72%; flex-direction: row; gap: 2cqw; padding: 0 2.6cqw; text-align: left; }
.flusso-scena.verticale .nodo.con-grafico b, .flusso-scena.verticale .nodo.con-registri b { font-size: 3cqw; }
.flusso-scena.verticale .ed-mini { height: 6.4cqw; margin-top: 1cqw; }
.flusso-scena.verticale .ed-reg { gap: 1cqw; margin-top: 1cqw; }
.flusso-scena.verticale .nodo .ed-reg .ed-reg-tag { padding: .7cqw 1cqw; border-radius: 1cqw; font-size: 2.3cqw; }
.flusso-scena.verticale .nodo .ed-reg .ed-reg-kwh { font-size: 2.6cqw; }
.flusso-scena.verticale .ed-reg-chi { margin-top: .9cqw; font-size: 2.2cqw; }
.flusso-scena.verticale .cuore { left: 32%; top: 42.55%; width: 36%; height: 19.15%; gap: 1.8cqw; border-radius: 4cqw; }
.flusso-scena.verticale .cuore img { width: 72%; }
.flusso-scena.verticale .cuore small { font-size: 2.7cqw; }
.flusso-scena.verticale .cuore::before { inset: -2cqw; border-radius: 5.6cqw; }
.flusso-scena.verticale .pacco text { font-size: 12px; }

/* ===========================================================================
   IL PANNELLO DEI CONTATORI IN LETTURA ([data-console], mosso da tele.js)
   =========================================================================== */
.console {
  background: #fff; border-radius: 22px; overflow: hidden; text-align: left;
  box-shadow: 0 40px 90px -34px rgba(16, 33, 66, .42), 0 0 0 1px rgba(0, 0, 0, .06);
}
.cn-testa { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #eef0f4; }
.cn-testa img { height: 15px; filter: brightness(0); }
.cn-testa b { font-size: 14px; font-weight: 600; }
.cn-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--teal); }
.cn-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ed-lampo 1.2s ease-in-out infinite; }
.cn-riga {
  display: grid; grid-template-columns: 1fr 22px 46px 124px; align-items: center; gap: 12px;
  padding: 11px 20px; border-bottom: 1px solid #f2f4f7; font-size: 14px; transition: background .3s;
}
.cn-riga[data-stato="linea"] { background: #f7fcf8; }
.cn-riga[data-stato="errore"] { background: #fff8f8; }
.cn-nome b { display: block; font-weight: 600; line-height: 1.25; }
.cn-nome span { display: block; font-size: 12px; color: var(--ink3); }
.cn-segnale { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.cn-segnale i { width: 3px; border-radius: 1px; background: #d9dee6; transition: background .3s; }
.cn-segnale i:nth-child(1) { height: 4px; } .cn-segnale i:nth-child(2) { height: 7px; }
.cn-segnale i:nth-child(3) { height: 10px; } .cn-segnale i:nth-child(4) { height: 14px; }
.cn-riga[data-stato="chiama"] .cn-segnale i { background: var(--amber); animation: ed-lampo .8s ease-in-out infinite; }
.cn-riga[data-stato="chiama"] .cn-segnale i:nth-child(2) { animation-delay: .1s; }
.cn-riga[data-stato="chiama"] .cn-segnale i:nth-child(3) { animation-delay: .2s; }
.cn-riga[data-stato="chiama"] .cn-segnale i:nth-child(4) { animation-delay: .3s; }
.cn-riga[data-stato="linea"] .cn-segnale i, .cn-riga[data-stato="letto"] .cn-segnale i { background: var(--green); }
.cn-riga[data-baud="4800"] .cn-segnale i:nth-child(4) { background: #d9dee6; }
.cn-riga[data-stato="errore"] .cn-segnale i:nth-child(1) { background: var(--red); }
.cn-baud { font-size: 12px; color: var(--ink3); font-variant-numeric: tabular-nums; text-align: right; }
.cn-stato {
  justify-self: end; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: #f1f3f6; color: var(--ink3); white-space: nowrap; transition: background .3s, color .3s;
}
.cn-riga[data-stato="chiama"] .cn-stato { background: #fff4e0; color: #b86e00; }
.cn-riga[data-stato="linea"] .cn-stato { background: #e6f7ec; color: #2b8a3e; }
.cn-riga[data-stato="letto"] .cn-stato { background: #e7f0fb; color: var(--blue); }
.cn-riga[data-stato="errore"] .cn-stato { background: #fdecec; color: var(--red); }
.cn-piede { display: flex; align-items: center; gap: 14px; padding: 16px 20px; font-size: 13px; color: var(--ink2); }
.cn-piede b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cn-barra { flex: 1; height: 6px; border-radius: 6px; background: #eef0f4; overflow: hidden; }
.cn-barra i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width .5s ease; }

/* --- il valore per il cliente --------------------------------------------- */
.benefici { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 64px; text-align: left; }
.beneficio { border-radius: 24px; padding: 34px 30px; background: var(--mist); }
.nebbia .beneficio { background: #fff; }
.beneficio .ti { font-size: 30px; color: var(--blue); display: block; margin-bottom: 16px; }
.beneficio h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.beneficio p { font-size: 15px; color: var(--ink2); }
.prima-dopo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; text-align: left; }
.pd-col { border-radius: 24px; padding: 34px 32px; }
.pd-col.oggi { background: var(--mist); }
.nebbia .pd-col.oggi { background: #fff; }
.pd-col.con { background: linear-gradient(160deg, var(--navy), var(--navy-x)); color: #fff; }
.pd-tit { font-size: 14px; font-weight: 600; color: var(--ink3); margin-bottom: 16px; }
.pd-col.con .pd-tit { color: #9fd3f3; }
.pd-col ul { list-style: none; display: grid; gap: 14px; }
.pd-col li { display: flex; gap: 12px; font-size: 16px; line-height: 1.4; }
.pd-col.oggi li { color: var(--ink2); }
.pd-col.oggi li::before { content: "\00d7"; color: var(--red); font-weight: 700; }
.pd-col.con li::before { content: "\2713"; color: #5ee0b0; font-weight: 700; }

/* --- tecnologia ------------------------------------------------------------ */
.tecno { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 36px; margin-top: 64px; text-align: left; }
.tec .ti { font-size: 30px; color: var(--blue); display: block; margin-bottom: 14px; }
.tec h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.tec p { font-size: 15px; color: var(--ink2); }

/* i modelli letti: 17 modelli di 8 produttori */
.modelli-titolo { font-size: 15px; font-weight: 600; color: var(--ink2); margin: 80px 0 22px; }
.modelli { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: left; }
.marca { border-radius: 18px; padding: 20px 22px; background: var(--mist); }
.nebbia .marca { background: #fff; }
.marca b { display: block; font-size: 15px; font-weight: 700; }
.marca span { display: block; font-size: 13px; color: var(--ink2); margin-top: 6px; line-height: 1.5; }
/* il nastro che scorre (contenuto ripetuto due volte nell'HTML) */
.nastro { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nastro-dentro { display: flex; gap: 12px; width: max-content; animation: ed-nastro 46s linear infinite; }
.nastro-dentro.indietro { animation-direction: reverse; }
.nastro:hover .nastro-dentro { animation-play-state: paused; }
.nastro span {
  white-space: nowrap; padding: 11px 18px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); font-size: 14px; color: var(--ink2);
}
.nastro span b { color: var(--ink); font-weight: 700; margin-right: 6px; }
@keyframes ed-nastro { to { transform: translateX(-50%); } }

/* --- partenza rapida ------------------------------------------------------- */
.passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 64px; text-align: left; }
.passo { border-radius: 24px; padding: 34px 30px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); }
.nebbia .passo { box-shadow: none; }
.passo .ti { font-size: 30px; color: var(--blue); display: block; }
.passo .quando { display: block; margin: 18px 0 6px; font-size: 12px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .08em; }
.passo h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.passo p { font-size: 15px; color: var(--ink2); }
.nota { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 34px; font-size: 16px; color: var(--ink2); }
.nota .ti { font-size: 22px; color: var(--blue); }

/* --- prova un contatore ([data-prova], mosso da tele.js) ------------------- */
/* Il modulo su una riga (modello, seriale, telefono del modem, K, il tasto);
   al lancio si apre la tendina con la chiamata e la curva di oggi. Mockup: la
   lettura e' simulata da tele.js */
.prova {
  max-width: 1080px; margin: 56px auto 0; text-align: left; border-radius: 28px; background: #fff; overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(16, 33, 66, .45), 0 0 0 1px rgba(0, 0, 0, .06);
}
.prova-campi { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr .6fr auto; gap: 14px; align-items: end; padding: 28px; }
.prova-campi .campo span small { font-weight: 400; color: var(--ink3); }
.prova-campi .btn { height: 48px; justify-content: center; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; }
.prova-campi .btn:disabled { opacity: .6; cursor: default; transform: none; }
.prova-errore { margin: -10px 28px 18px; font-size: 14px; color: var(--red); }
.prova-errore:empty { display: none; }
.tendina { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s ease; }
.tendina.aperta { grid-template-rows: 1fr; }
.tendina-dentro { min-height: 0; overflow: hidden; }
.pv { display: grid; grid-template-columns: 310px 1fr; border-top: 1px solid #eef0f4; }
.pv-sx { padding: 26px 28px; border-right: 1px solid #eef0f4; background: #fbfcfd; }
.pv-dx { min-width: 0; padding: 26px 28px; }
.pv-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.pv-testa b { display: block; font-size: 17px; }
.pv-testa span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink3); }
.pv-stato { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #fff4e0; color: #b86e00; }
.pv[data-stato="linea"] .pv-stato { background: #e6f7ec; color: #2b8a3e; }
.pv[data-stato="fatto"] .pv-stato { background: #e7f0fb; color: var(--blue); }
.pv-passi { list-style: none; display: grid; gap: 16px; }
.pv-passi li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; opacity: .4; transition: opacity .3s; }
.pv-passi li.corso, .pv-passi li.fatto { opacity: 1; }
.pv-passi li > i { position: relative; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--line); }
.pv-passi li.corso > i { border-color: var(--amber); animation: pv-pulsa 1s ease-out infinite; }
.pv-passi li.fatto > i { border-color: var(--teal); background: var(--teal); }
.pv-passi li.fatto > i::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes pv-pulsa { 0% { box-shadow: 0 0 0 0 rgba(245, 159, 0, .5); } 100% { box-shadow: 0 0 0 8px rgba(245, 159, 0, 0); } }
.pv-passi b { display: block; font-size: 15px; font-weight: 600; }
.pv-passi span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink2); }
.pv-titolo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pv-titolo b { font-size: 15px; font-weight: 600; }
.pv-titolo span { font-size: 12px; color: var(--ink3); }
.pv-grafico { position: relative; margin-top: 14px; }
.pv-grafico svg { display: block; width: 100%; height: 190px; overflow: visible; cursor: crosshair; }
.pv-barra { fill: var(--azure); }
.pv-barra.su { fill: var(--blue); }
.pv-vuota { fill: #e6ebf1; }
.pv-ora { stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.pv-asse { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.pv-tip {
  position: absolute; z-index: 2; padding: 6px 9px; border-radius: 8px; background: var(--ink); color: #fff;
  font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -100%); transition: opacity .15s;
}
.pv-numeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.pv-num { border-radius: 14px; padding: 14px 16px; background: var(--mist); }
.pv-num b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pv-num span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink2); }
.pv-piede { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; font-size: 13px; color: var(--ink3); }
.pv-piede span { display: inline-flex; align-items: center; gap: 6px; }
.pv-piede button { border: 0; background: transparent; color: var(--blue); font: inherit; font-weight: 500; cursor: pointer; }
@media (max-width: 960px) {
  .prova-campi { grid-template-columns: 1fr 1fr; }
  .prova-campi .btn { grid-column: 1 / -1; }
  .pv { grid-template-columns: 1fr; }
  .pv-sx { border-right: 0; border-bottom: 1px solid #eef0f4; }
  .pv-numeri { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .prova-campi { grid-template-columns: 1fr; padding: 22px; }
  .prova-errore { margin: -6px 22px 16px; }
  .pv-sx, .pv-dx { padding: 22px; }
  .pv-grafico svg { height: 150px; }
}

/* --- pricing: attivazione e consumo, senza cifre --------------------------- */
.prezzi { display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 22px; margin-top: 64px; text-align: left; }
.prezzo { display: flex; flex-direction: column; border-radius: 24px; padding: 36px 32px; background: var(--mist); }
.nebbia .prezzo { background: #fff; }
.prezzo-tag {
  align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: rgba(12, 166, 120, .1);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal);
}
.prezzo h3 { margin: 16px 0 8px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.prezzo p { font-size: 15px; color: var(--ink2); }
.prezzo ul { list-style: none; display: grid; gap: 10px; margin-top: auto; padding-top: 22px; }
.prezzo ul::before { content: ""; display: block; height: 1px; margin-top: 22px; background: var(--line); }
.prezzo li { display: flex; gap: 10px; font-size: 15px; }
.prezzo li::before { content: "\2713"; color: var(--teal); font-weight: 700; }
/* il conto del mese che si riempie ([data-consumo]) */
.conto { display: flex; flex-direction: column; border-radius: 24px; padding: 26px 26px 22px; background: linear-gradient(160deg, var(--navy), var(--navy-x)); color: #fff; }
.conto-testa { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: #9fd3f3; }
.conto-testa b { font-size: 16px; color: #fff; }
.conto-righe { flex: 1; display: flex; flex-direction: column; min-height: 290px; margin-top: 12px; }
.conto-riga { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); animation: ed-scende .5s ease; }
.conto-riga b { display: block; font-size: 14px; font-weight: 600; }
.conto-riga small { display: block; font-size: 12px; color: #9fb4cf; }
.conto-riga em { font-style: normal; font-size: 15px; font-weight: 700; color: #5ee0b0; font-variant-numeric: tabular-nums; }
.conto-riga.zero small, .conto-riga.zero em { color: #ff8f8f; }
.conto-piede { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 13px; color: #9fd3f3; }
.conto-piede b { font-size: 30px; color: #fff; font-variant-numeric: tabular-nums; }
@keyframes ed-scende { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.prezzi-nota { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; font-size: 16px; color: var(--ink2); }
.prezzi-nota .ti { font-size: 20px; color: var(--teal); }

/* --- loghi ----------------------------------------------------------------- */
.loghi-titolo { font-size: 14px; color: var(--ink3); text-align: center; margin-bottom: 26px; }
.loghi { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px 60px; }
.loghi img { height: 28px; width: auto; filter: brightness(0); opacity: .42; transition: opacity .3s; }
.loghi img:hover { opacity: .75; }

/* --- domande frequenti ---------------------------------------------------- */
.faq { max-width: 860px; margin: 56px auto 0; text-align: left; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 28px; font-weight: 300; line-height: 1; color: var(--blue); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 26px; color: var(--ink2); font-size: 17px; max-width: 720px; }

/* --- contatti: recapiti + modulo ------------------------------------------ */
.contatto { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; margin-top: 64px; text-align: left; }
.recapiti, .modulo { background: var(--mist); border-radius: 28px; padding: 44px 40px; }
.nebbia .recapiti, .nebbia .modulo { background: #fff; }
.recapiti h3 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 22px; }
.recapiti ul { list-style: none; margin-top: 36px; display: grid; gap: 22px; }
.recapiti li { display: flex; gap: 14px; align-items: flex-start; }
.recapiti li .ti { font-size: 22px; color: var(--blue); margin-top: 2px; }
.recapiti li span { display: block; font-size: 13px; color: var(--ink3); }
.recapiti li a, .recapiti li div { font-size: 17px; color: var(--ink); }
.modulo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; position: relative; }
.campo span { display: block; font-size: 13px; font-weight: 500; color: var(--ink2); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(32, 107, 196, .15);
}
.lungo { grid-column: 1 / -1; }
.consenso { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink2); }
.consenso input { margin-top: 3px; }
.invio { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.invio button { border: 0; cursor: pointer; font-family: inherit; }
.invio button:disabled { opacity: .6; cursor: default; }
.esito { font-size: 13px; color: var(--ink3); }
.esito.ok { color: var(--teal); } .esito.ko { color: var(--red); }
.nascosto { position: absolute; left: -9999px; }

/* --- piede ----------------------------------------------------------------- */
.piede { border-top: 1px solid var(--line); padding: 24px 0 44px; font-size: 12px; color: var(--ink3); }
.piede .wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.piede img { height: 14px; filter: brightness(0); opacity: .5; }
.piede .anno { margin-left: auto; }

/* --- comparsa allo scorrimento -------------------------------------------- */
.rv { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.rv.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .fatti { grid-template-columns: 1fr 1fr; }
  .benefici, .prima-dopo, .tappe, .tecno, .passi, .prezzi, .contatto, .modulo { grid-template-columns: 1fr; }
  .modelli { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .cn-riga { grid-template-columns: 1fr 20px 104px; }
  .cn-baud { display: none; }
  /* la richiesta di telelettura in piccolo: proporzione da telefono, testi piu' grandi */
  .rqd { aspect-ratio: 1 / 1; }
  .rqd-top { height: 10cqw; gap: 3cqw; padding: 0 3cqw; font-size: 2.6cqw; }
  .rqd-top img { height: 3.2cqw; }
  .rqd-sub { height: 9cqw; gap: 2cqw; padding: 0 3cqw; font-size: 2.6cqw; }
  .rqd-sub b { font-size: 3cqw; }
  .rqd-azione { gap: 1cqw; padding: 1cqw 2cqw; }
  .rqd-lista { padding: 0 3cqw; }
  .rqd-riga { grid-template-columns: 3.6cqw 1fr 9cqw 17cqw; gap: 2cqw; height: 8.4cqw; padding: 0 1cqw; font-size: 3cqw; }
  .rqd-riga > span { font-size: 2.4cqw; }
  .rqd-check { width: 3cqw; height: 3cqw; }
  .rqd-riga.sel .rqd-check::after { border-width: 0 .5cqw .5cqw 0; }
  .rqd-riga > .rqd-esito { font-size: 2.3cqw; padding: .8cqw 1.4cqw; }
  .rqd-modale { left: 4cqw; right: 4cqw; width: auto; top: 21cqw; padding: 4cqw; }
  .rqd-mt { gap: 1.6cqw; padding-bottom: 2.4cqw; font-size: 3.4cqw; }
  .rqd-mt .ti { font-size: 4cqw; }
  .rqd-nota { margin: 2.4cqw 0 1cqw; font-size: 2.6cqw; }
  .rqd-bi { gap: 2cqw; margin-top: 2cqw; font-size: 2.8cqw; }
  .rqd-sw { width: 7.4cqw; height: 4.2cqw; border-radius: 2.1cqw; }
  .rqd-sw::after { top: .4cqw; left: .4cqw; width: 3.4cqw; height: 3.4cqw; }
  .rqd-periodo { gap: 2.4cqw; margin-top: 3cqw; }
  .rqd-periodo label { gap: .9cqw; font-size: 2.1cqw; }
  .rqd-periodo label span { padding: 1.4cqw 2cqw; font-size: 2.8cqw; }
  .rqd-piede { gap: 2cqw; margin-top: 3.4cqw; font-size: 2.8cqw; }
  .rqd-piede span { padding: 1.4cqw 2.6cqw; }
}
@media (max-width: 1060px) { .nav .prodotto-nome { display: none; } .nav .voci { gap: 20px; } }
@media (max-width: 920px) {
  .nav .voci { display: none; }
  .nav .btn { margin-left: auto; }
}
@media (max-width: 760px) {
  .nav .btn { margin-left: auto; }
  .sez { padding: 84px 0; }
  .recapiti, .modulo { padding: 32px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .flusso-scena .filo-vivo, .cuore::before, .nodo .gsm i, .nodo.contatore .ti::after,
  .eti::before, .cn-live::before, .cn-segnale i, .nastro-dentro { animation: none !important; }
}