/* La pagina di atterraggio della consulenza: il calendario, il modulo a passi, l'esito. ⚠️ Questo foglio si carica DOPO home.css e cassa.css, e da soli quei due vestono gia' quasi tutto: la barra (.barra.sola), i bottoni (.bot), i blocchi (.blocchetto), i campi (.cassa .campo), le note d'errore (.nota), la casella del consenso (.assenso), le spunte verdi (.spunte), i riquadri del bento (.tass), il prezzo grande (.euro), la fascia color velo (.garanzia), il bollino dell'esito (.bollino.grande) e perfino i tasti a mattonella del calendario, che sono i .pezzo della scelta della fascia alla cassa. Qui dentro c'e' SOLO quello che non esisteva: l'apertura della pagina e la freccia verso il modulo, i passi del modulo, il calendario a mese, il campo che si apre sotto «Altro», le targhe e le fasce del prezzo, e il riquadro di conferma. Nessun colore nuovo: tutto esce dalle variabili di home.css. */ /* ---------- l'apice: la scheda di chi ha gia' prenotato ---------- ⚠️ `.apice` lo usa **solo** la pagina con ?gestisci=. La pagina di atterraggio ha un'apertura sua, `.apertura`, piu' in basso. */ .consulenza .apice{max-width:none;padding-bottom:clamp(30px,4vw,44px)} .consulenza .apice h1{font-size:clamp(31px,4.4vw,50px);line-height:1.05;max-width:19ch} .consulenza .apice.stretto h1{max-width:24ch} .consulenza .apice .dice.grande{margin-top:20px;font-size:clamp(17.5px,1.9vw,20.5px); color:var(--pece-2);max-width:54ch;line-height:1.55} .consulenza .apice .occhio{margin-bottom:14px} .consulenza .apice .tasti{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} @media(max-width:560px){.consulenza .apice .tasti .bot{flex:1 1 100%}} /* Il link della videochiamata, su questa pagina. ⚠️ **Sta sopra i tasti e non e' un bottone**, ed e' una scelta: chi apre questa pagina il giorno prima vuole leggerlo o copiarlo, e chi la apre all'ora giusta lo tocca. Un terzo bottone accanto a «Spostala» e «Disdici» avrebbe fatto sembrare le tre cose ugualmente probabili, e avrebbe messo un invito a entrare sopra una stanza ancora chiusa. `overflow-wrap` perche' su un telefono stretto un indirizzo intero non ci sta: meglio spezzato che uscito dallo schermo. */ .consulenza .apice .meet-qui{margin-top:14px;font-size:17px;line-height:1.5} .consulenza .apice .meet-qui a{color:var(--br-cupo);font-weight:600; overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:3px} /* ========================================================================= L'IMPAGINAZIONE DELLA PAGINA DI ATTERRAGGIO (rifatta il 31/08/2026) Il ritmo alterna larghezze: apertura a due colonne con **il modulo** a destra, riga larga delle quattro spunte, fascia a tutta pagina con l'elenco di quello che si vede e le schermate dentro, quattro riquadri col programma in breve, la fascia del prezzo con le due targhe e la garanzia grande, e in fondo l'ultimo tasto. ⚠️ Niente colori, niente caratteri e niente ombre nuove: tutto esce dalle variabili di home.css. ========================================================================= */ /* ---------- 1. l'apertura ---------- */ /* La pagina non comincia su un foglio bianco: dietro l'apertura ci sono i due rettangoli arrotondati e sfocati dei nostri post (social/instagram-post- 1080x1350.png). Sono pseudo-elementi, cosi' non c'e' nessun nodo in piu' da leggere per chi usa un lettore di schermo, e stanno a z-index -1 come fa gia' `.apre::before` nella home. ⚠️ Niente `overflow:clip` qui sopra: taglierebbe la sfocatura con un bordo netto proprio dove deve sfumare. Lo scorrimento laterale lo impedisce gia' `html{overflow-x:clip}` in home.css. */ .apertura{position:relative;padding-bottom:clamp(26px,3.4vw,40px)} .apertura::before,.apertura::after{content:"";position:absolute;z-index:-1; pointer-events:none;border-radius:clamp(44px,6vw,96px)} .apertura::before{top:-9%;right:-5%;width:min(50vw,580px);aspect-ratio:5/4; background:oklch(0.946 0.040 58);filter:blur(22px);transform:rotate(-8deg)} .apertura::after{bottom:-6%;left:-10%;width:min(42vw,440px);aspect-ratio:1; background:oklch(0.952 0.032 66);filter:blur(26px);transform:rotate(12deg)} /* Il testo a sinistra, il modulo a destra. ⚠️ `align-items:start` e non `center`: il modulo e' alto e cambia altezza a ogni passo, e con le due colonne centrate il titolo scivolerebbe su e giu' mentre si compila. */ .apertura-griglia{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.94fr); gap:clamp(26px,3.6vw,52px);align-items:start} @media(max-width:1000px){ .apertura-griglia{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,38px)} } .apertura h1{font-size:clamp(31px,4.2vw,50px);line-height:1.04;margin:16px 0 0;max-width:15ch} /* La parte che conta in arancio: e' il taglio dei nostri post, non un'idea nuova. `--br-cupo` e non `--br`: l'arancio pieno a 50px sul panna abbaglia e sotto i 4,5:1 di contrasto non ci si va. */ .apertura h1 .col{color:var(--br-cupo)} /* ---------- il titolo lungo ---------- (02/09/2026) ⚠️ **Non e' una misura nuova per tutti: e' una classe che vale solo per i titoli lunghi.** Se avessimo semplicemente rimpicciolito `.apertura h1`, i tre angoli corti — che stanno in due righe e riempiono la colonna — si sarebbero seduti a meta' pagina per colpa del quarto. Qui il corpo scala **in funzione della lunghezza**, non del monitor: chi ha poche parole le tiene grandi, chi ne ha tante le tiene leggibili. La classe `lunga` la scrive PHP (template-consulenza.php) quando il titolo dell'angolo passa le 55 battute; il conto e' li' e non qui perche' il browser non sa contare i caratteri di una frase prima di disegnarla. Cosa cambia, e perche' tutte e tre le cose insieme: · **22ch invece di 15.** E' la leva che pesa di piu': la misura del titolo si allarga fino a stare accanto a quella della riga sotto (27ch), e le righe passano da cinque a tre senza togliere una parola. Piu' larga di cosi' non serve — a 22ch la frase ha gia' trovato i suoi tre a capo. · **40px invece di 50 di tetto**, con 3,2vw al posto di 4,2. Tre righe a 50px sarebbero comunque 156px di grassetto: il titolo resta il pezzo piu' grosso della pagina (a 1440 il titolo sta a 40px e la riga sotto a 25, cioe' un salto di 1,6 volte) ma smette di essere un muro. · **25px di pavimento invece di 31.** E' il numero che decide il telefono: a 390px di schermo la colonna e' larga 350 e a 25px la frase sta in tre righe, a 31 ne vorrebbe cinque. Sotto i 15px non si scende mai, e qui siamo dieci px sopra. · **1.08 di interlinea invece di 1.04.** Righe piu' lunghe hanno bisogno di un filo d'aria in piu' per non far perdere il segno tornando a capo. `text-wrap:balance` pareggia le tre righe invece di lasciare l'ultima con due parole in croce; dove il browser non lo conosce non succede niente e il testo va a capo come sempre. 📏 **Il conto, per chi domani scrive un titolo ancora piu' lungo:** cosi' com'e', fino a ~115 battute si resta entro le quattro righe (173px a monitor largo, 108 da telefono). Oltre, si torna al muro. */ .apertura h1.lunga{font-size:clamp(25px,3.2vw,40px);line-height:1.08;max-width:22ch; text-wrap:balance} /* ⚠️ **La promessa della pagina, e si deve vedere.** Il titolo dice cosa si guarda; questa riga dice cosa ci si porta a casa, ed e' la ragione per cui uno da' mezz'ora a uno sconosciuto. Percio' ha il carattere e il peso dei titoli e il nero del testo forte — non il grigio (`--pece-2`) del paragrafo che viene subito dopo. Fra i due c'e' un salto di peso e di colore, non solo di misura: e' quello che la fa leggere per prima. */ .apertura .promette{margin:clamp(14px,1.8vw,20px) 0 0; font-family:var(--d);font-weight:700;letter-spacing:-0.02em; font-size:clamp(19px,2.05vw,25px);line-height:1.25;color:var(--pece);max-width:27ch} .apertura .dice.grande{margin-top:clamp(14px,1.6vw,18px);font-size:clamp(17px,1.8vw,19.5px); color:var(--pece-2);max-width:50ch;line-height:1.55} /* Chi risponde, con la faccia. La domanda che una persona si fa mentre scrive il proprio numero e' «a chi lo sto dando»: qui la risposta ha un viso, e non serve piu' la scheda a lato del modulo che c'era prima. */ .chirisponde{display:flex;align-items:center;gap:14px;margin-top:clamp(18px,2.2vw,24px)} .chirisponde img{width:58px;height:58px;flex:0 0 auto;border-radius:50%; object-fit:cover;object-position:50% 12%; background:var(--br-velo);border:1.5px solid var(--filo)} .chirisponde p{margin:0;font-size:15.5px;line-height:1.4;color:var(--pece-2);max-width:42ch} /* ---------- la freccia che porta al modulo ---------- ⚠️ **Si vede solo sopra i 1000px, ed e' la stessa soglia a cui l'apertura si impila.** Sotto, il modulo non e' a destra ma sotto: una freccia che punta a destra manderebbe l'occhio nel margine della pagina. Non e' un dettaglio di gusto, e' una freccia che dice il falso. Disegnata a mano nel template (due `path`, tratto tondo come tutte le altre figure del sito) e non presa da una libreria: le frecce di serie sono dritte, piccole e centrate in un quadrato, e questa deve essere grande, curva e appoggiata al bordo destro della colonna. */ .freccia-modulo{display:none} @media(min-width:1001px){ .freccia-modulo{display:block;color:var(--br); width:clamp(150px,15vw,205px);margin:clamp(6px,1vw,14px) 0 0 auto} /* `overflow:visible`: il tratto e' spesso 3,4 e la punta arriva al bordo del viewBox — senza, il browser la taglia a meta'. */ .freccia-modulo svg{display:block;width:100%;height:auto;overflow:visible} /* Si disegna da sola, una volta, dopo che la pagina si e' posata: 190 e 60 sono le lunghezze dei due tracciati arrotondate per eccesso, se il disegno cambia vanno rifatte. Curva esponenziale in uscita, come tutto il resto del sito; niente rimbalzi. */ .freccia-modulo .asta{stroke-dasharray:190;stroke-dashoffset:190; animation:fc-freccia .95s cubic-bezier(.16,1,.3,1) .5s forwards} .freccia-modulo .punta{stroke-dasharray:60;stroke-dashoffset:60; animation:fc-freccia .4s cubic-bezier(.16,1,.3,1) 1.2s forwards} } @keyframes fc-freccia{to{stroke-dashoffset:0}} @media(prefers-reduced-motion:reduce){ .freccia-modulo .asta,.freccia-modulo .punta{animation:none;stroke-dashoffset:0} } /* ⚠️ Il tasto dell'apertura si vede **solo sotto i 1000px**, dove il modulo e' sceso sotto il testo. Sopra, il modulo e' li' accanto: un bottone che porta a una cosa che si sta gia' guardando e' rumore, e su una pagina di atterraggio ogni bottone in piu' e' una decisione in piu' da prendere. */ .apertura .tasti.solo-stretto{display:none} @media(max-width:1000px){ .apertura .tasti.solo-stretto{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} } @media(max-width:560px){.apertura .tasti.solo-stretto .bot{flex:1 1 100%}} /* Le quattro spunte, larghe quanto la pagina invece che infilate nella colonna del titolo. ⚠️ A quattro colonne le frasi stanno su due o tre righe: sotto i 1040px si passa a due colonne e sotto i 560 a una. Non si accorcia il testo per farcele stare su una riga. */ .apertura .spunte{margin-top:clamp(28px,3.6vw,44px); padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--filo); grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 26px} @media(max-width:1040px){.apertura .spunte{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.apertura .spunte{grid-template-columns:minmax(0,1fr)}} /* ---------- 2. la fascia «cosa vedremo insieme» ---------- */ /* A tutta pagina, su fondo panna-2 e fra due fili: le schermate sono larghe 780 e 1469px, dentro una colonna di testo non si leggerebbero. */ .fascia-schermi{background:var(--panna-2);padding:clamp(48px,6.4vw,92px) 0; border-top:1px solid var(--filo);border-bottom:1px solid var(--filo)} .fascia-capo{max-width:64ch} .fascia-capo h2{font-size:clamp(25px,3.4vw,42px);max-width:20ch;margin:12px 0 0;line-height:1.06} .consulenza .fascia-capo .dice{margin-top:16px;font-size:clamp(16.5px,1.8vw,19px)} .mostra-larga{margin:clamp(28px,3.4vw,44px) 0 0;max-width:920px} .mostra-larga figcaption,.paio figcaption{margin-top:12px;font-size:15px;color:var(--fumo);line-height:1.45} /* Le sei voci di quello che si vede. Non sono riquadri: un titolo e una riga, separati da un filo, su due colonne. Sei card tutte uguali sarebbero il disegno che hanno tutte le pagine fatte in serie, e queste sono un elenco di cose da guardare, non sei prodotti da confrontare. Il `min(100%,300px)` serve a 360px, dove nella colonna restano 320: senza, la griglia pretende 300 di minimo anche quando non ce ne sono. */ .vedremo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:0 clamp(26px,4vw,64px);margin-top:clamp(30px,4vw,48px)} .vedremo article{min-width:0;padding:clamp(18px,2.2vw,24px) 0;border-top:1px solid var(--filo)} .vedremo h3{margin:0 0 8px;font-family:var(--d);font-weight:700; font-size:clamp(18px,2vw,21px);letter-spacing:-0.02em;line-height:1.15} .vedremo p{margin:0;color:var(--pece-2);font-size:16.5px;line-height:1.55;max-width:52ch} /* auto-fit con un minimo, non due colonne fisse: sotto i 640px le due schermate si mettono una sotto l'altra da sole. */ .paio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(18px,2.4vw,32px);margin-top:clamp(26px,3.4vw,40px)} .paio figure{margin:0;min-width:0} /* ---------- 3. «cos'è, in breve» ---------- */ .consulenza .blocco{padding:clamp(44px,5.6vw,80px) 0} .cose h2{font-size:clamp(25px,3.4vw,44px);max-width:19ch;line-height:1.06;margin-top:12px} .cose h2 .col{color:var(--br-cupo)} /* I quattro riquadri sono i `.tass` del bento della home, riusati identici. ⚠️ L'icona sta **in riga col titolo**, piccola: il tondo grande sopra l'intestazione e' la forma che hanno tutte le pagine fatte in serie e si riconosce da lontano. ⚠️ Niente sollevamento al passaggio del mouse: nella home i `.tass` si alzano perche' fanno parte di una griglia che si esplora, qui non si clicca niente e un riquadro che si muove promette una cosa che non c'e'. */ /* ⚠️ **Cinque riquadri, e cinque non stanno in una griglia a quattro.** Con `auto-fit` venivano quattro in alto e uno solo in basso, con tre quarti di riga bianca accanto: il buco bianco e' esattamente la cosa che non si fa qui. Percio' la griglia e' a sei colonne e i riquadri si prendono quello che serve — 2+2+2 in alto, 3+3 in basso — e la riga si chiude sempre. Sotto i 900px sono due, con l'ultimo largo il doppio; sotto i 560 una sola. */ .quadretti{display:grid;grid-template-columns:minmax(0,1fr); gap:14px;margin-top:clamp(26px,3.4vw,40px)} .quadretti .tass{min-width:0} @media(min-width:560px){ .quadretti{grid-template-columns:repeat(2,minmax(0,1fr))} .quadretti .tass:nth-child(5){grid-column:span 2} } @media(min-width:900px){ .quadretti{grid-template-columns:repeat(6,minmax(0,1fr))} .quadretti .tass{grid-column:span 2} .quadretti .tass:nth-child(4),.quadretti .tass:nth-child(5){grid-column:span 3} } .quadretti .tass:hover{transform:none;box-shadow:none} /* `flex-start` e non `center`: quando il titolo va a due righe, l'icona centrata finisce a meta' fra le due e sembra scivolata. */ .quadretti .tass h3{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:20px} .quadretti .tass h3 svg{width:26px;height:26px;flex:0 0 auto;margin-top:-1px;color:var(--br-cupo)} .quadretti .tass p{font-size:16px;line-height:1.55} /* ---------- 4. prezzo e garanzia ---------- */ /* ⚠️ `.garanzia .tel` in home.css e' una griglia a due colonne: qui dentro c'e' una colonna sola, con le targhe e poi la promessa. */ .consulenza .soldi .tel{display:block} .soldi-capo h2{font-size:clamp(26px,3.6vw,44px);max-width:20ch;margin:12px 0 0;line-height:1.06} /* La riga che dice perche' c'e' un «da» davanti al prezzo. Sta prima delle targhe apposta: la domanda «quanto costa» si risponde meglio dicendo subito da cosa dipende, invece di far scoprire dopo che ci sono tre fasce. */ .fasce-dice{margin:clamp(16px,2vw,22px) 0 0;max-width:64ch; font-size:16.5px;line-height:1.55;color:var(--pece-2)} .targhe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:14px;margin-top:clamp(20px,2.4vw,28px);max-width:720px} .targa{position:relative;background:var(--panna);border:1.5px solid oklch(0.91 0.028 54); border-radius:18px;padding:clamp(20px,2.4vw,26px)} .targa.spicca{border-color:var(--br);border-width:2px; box-shadow:0 20px 42px -34px oklch(0.702 0.144 42 / .85)} .targa .occhio{margin-bottom:8px} /* Il listino barrato sopra la cifra. ⚠️ In home.css la regola e' `.fascia .prima`, legata alle schede della pagina prezzi: qui va ridichiarata sulla targa, mentre la pillola `.risparmio` e' gia' globale e si riusa com'e'. */ .targa .prima{display:flex;align-items:center;flex-wrap:wrap;gap:10px; margin:0 0 6px;font-size:16px;color:var(--fumo)} .targa .prima s{text-decoration-thickness:1.5px;white-space:nowrap; font-variant-numeric:tabular-nums} .targa .euro{margin:0} .targa .euro b{font-size:clamp(36px,4vw,46px)} /* 🔴 Il «da» non e' un ornamento: senza, questa targa dice che il programma costa 19 € e basta, e chi ne gestisce quaranta lo scopre alla cassa. Sta in linea col numero e non sopra, cosi' si legge come una frase sola. */ .targa .euro .da{font-family:var(--t);font-size:17px;font-weight:600;color:var(--pece-2)} /* Le tre fasce. Un elenco separato da fili, non tre riquadri: sono tre righe di listino da leggere in fila, non tre prodotti da confrontare — quelli stanno sul sito, alla pagina dei prezzi. */ .scaglioni{list-style:none;margin:clamp(18px,2.2vw,24px) 0 0;padding:0;max-width:720px} .scaglioni li{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px; padding:13px 2px;font-size:16px;line-height:1.4; border-top:1px solid oklch(0.91 0.028 54)} .scaglioni li:last-child{border-bottom:1px solid oklch(0.91 0.028 54)} .scaglioni b{font-family:var(--d);font-weight:700;color:var(--pece);min-width:84px} .scaglioni span{flex:1 1 auto;color:var(--pece-2)} .scaglioni i{font-style:normal;font-weight:700;color:var(--br-cupo); white-space:nowrap;font-variant-numeric:tabular-nums} /* Il listino della riga: smorzato e di peso normale, cosi' la cifra che si paga resta l'unica in evidenza. Il margine sta qui e non nel `gap` della riga perche' il barrato e' figlio dell'``, non della flex. */ .scaglioni i s{margin-right:9px;font-weight:500;color:var(--fumo); text-decoration-thickness:1.5px} .targa .patto{margin-top:10px;font-size:15.5px;line-height:1.45;color:var(--pece-2)} /* ⚠️ «Un mese in regalo» non e' scritto nel markup: il template lo stampa solo se l'annuale vale davvero undici mensilita'. Se un giorno lo sconto cambia, il bollino sparisce da solo invece di dire una bugia. */ .targa .regalo{position:absolute;top:-13px;right:clamp(14px,2vw,20px); padding:4px 13px;border-radius:999px;white-space:nowrap; background:var(--br);color:oklch(0.995 0.008 60);font-size:15px;font-weight:700} .consulenza .rinnova{margin-top:clamp(18px,2.2vw,24px);max-width:74ch; font-size:16px;line-height:1.55;color:var(--pece-2)} /* La garanzia e' la cosa piu' forte che abbiamo, e prima era una riga in mezzo a un paragrafo. Qui e' un riquadro suo, col titolo grande. */ .promessa{display:grid;grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,2.2vw,26px);align-items:start; margin-top:clamp(30px,4vw,48px);padding:clamp(22px,3vw,38px); background:var(--panna);border:1.5px solid oklch(0.91 0.028 54);border-radius:20px} @media(max-width:560px){.promessa{grid-template-columns:minmax(0,1fr);gap:16px}} .sigillo{width:clamp(50px,5vw,62px);height:clamp(50px,5vw,62px);flex:0 0 auto; display:grid;place-items:center;border-radius:50%; background:var(--br-velo);color:var(--br-cupo)} .sigillo svg{width:58%;height:58%} .promessa h3{margin:0;font-family:var(--d);font-weight:700;letter-spacing:-0.025em; font-size:clamp(24px,3.2vw,38px);line-height:1.08;max-width:19ch} /* «Rimborso» e «zero» in arancio, «garantito» e «Rischio» in nero: le due parole colorate sono quelle che si leggono anche saltando la riga, e insieme dicono gia' tutta la promessa. `--br-cupo` e non `--br`, come per il titolo dell'apertura: l'arancio pieno a 38px sul velo non arriva a 4,5:1. */ .promessa h3 .col{color:var(--br-cupo)} .promessa p{margin:14px 0 0;font-size:clamp(16.5px,1.8vw,18.5px); line-height:1.55;color:var(--pece-2);max-width:62ch} /* ---------- 5. l'ultimo tasto ---------- */ .ricapo{padding:clamp(44px,6vw,80px) 0;text-align:center} .ricapo .tasti{display:flex;justify-content:center;flex-wrap:wrap;gap:12px} @media(max-width:560px){.ricapo .tasti .bot{flex:1 1 100%}} .consulenza .ricapo .minuta{margin-top:14px} /* ========================================================================= IL MODULO ========================================================================= */ /* Il riquadro che contiene tutto. ⚠️ 640px di tetto: quando l'apertura si impila (sotto i 1000px) la colonna diventa larga quanto la pagina, e un modulo largo un metro promette risposte lunghe. */ .prenota-scatola{min-width:0;max-width:640px; background:var(--panna);border:1px solid var(--filo);border-radius:20px; padding:clamp(20px,2.4vw,28px); box-shadow:0 30px 60px -42px oklch(0.3 0.05 45 / .5), 0 4px 14px -9px oklch(0.3 0.05 45 / .22)} /* Il tasto in cima e quello in fondo portano qui, e la barra della pagina E' appiccicata: senza questo margine il titolo del modulo finisce sotto la barra e chi ha appena premuto atterra su una riga tagliata a meta'. 88px e' l'altezza della barra da telefono (70) piu' un po' d'aria; 104 quella da computer (82). */ #prenota,#sposta{scroll-margin-top:clamp(88px,10vw,104px)} .prenota-capo h2{font-size:clamp(22px,2.4vw,28px);line-height:1.08} .consulenza .prenota-capo .dice{margin-top:10px;font-size:16px;margin-bottom:0} /* Una riga di spazio vera fra le due frasi: la seconda dice cosa fare adesso, e attaccata alla prima sembrerebbe la coda della stessa. */ .consulenza .prenota-capo .dice + .dice{margin-top:15px} /* ---------- un passo ---------- 🛑 **I numeri dei passi non ci sono piu'** (31/08/2026). Erano quattro cerchietti col filo che li univa e la riga «Passo 2 di 4 · Gestionale». Dicevano a chi era appena arrivato da un annuncio quanto lavoro lo aspettava, che su una pagina di atterraggio e' un motivo per chiudere e non per continuare. Restano la domanda e i bottoni. Se qualcuno rimette una barra di avanzamento qui, sta rimettendo il rumore che e' stato tolto. */ /* `
`: e' il raggruppamento giusto per una domanda con piu' risposte, e la domanda e' la sua ``. Il vestito di serie del browser (bordo, margini, la legenda che scavalca il bordo) si toglie tutto. */ /* Il filo sopra stacca la domanda dal titolo del modulo: senza, l'ultima riga dell'introduzione e la domanda si leggono come due righe della stessa cosa. */ .modulo-consulenza .scalino{min-width:0;margin:0;padding:clamp(18px,2.2vw,22px) 0 0; border:0;border-top:1px solid var(--filo)} /* Le mattonelle attaccate alla domanda: `.scelta` arriva da cassa.css con 12px di stacco suo, e sommati ai 16 della domanda facevano un buco. */ .modulo-consulenza .campo > .scelta{margin-top:0} /* ⚠️ 19px fissi, non una `clamp`: la domanda e' la stessa cosa in tutte e cinque le schermate e non ha motivo di crescere col monitor. Deciso da Francesco il 31/08. */ .modulo-consulenza .domanda{display:block;float:none;width:100%;margin:0 0 16px;padding:0; font-family:var(--d);font-weight:700;letter-spacing:-0.02em;line-height:1.25; font-size:19px;color:var(--pece)} /* Un passo alla volta. La classe `a-passi` la scrive PHP, non il browser: se la mettesse il browser si vedrebbe per un istante il modulo intero e poi quattro quinti sparire. A disfarla e' il