/* pagina.css · quello che serve SOLO a questa landing.
   base.css resta la forma comune e non si tocca: qui stanno i tre blocchi
   che questa pagina ha e il modello non prevedeva. Si carica dopo brand.css,
   cosi i ruoli del brand sono gia definiti quando questi stili li usano. */

/* ---- il blocco autorita: testo a sinistra, le due foto di fiera a destra */
.autorita{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.autorita-testo p{margin:0 0 14px}
.autorita-testo p:last-child{margin-bottom:0}
.autorita-foto{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.autorita-foto img{width:100%;height:100%;max-height:340px;object-fit:cover;object-position:center top;border-radius:18px;display:block}
@media (max-width:767px){
  .autorita{grid-template-columns:1fr;gap:24px}
  .autorita-foto img{max-height:240px}
}

/* ---- la chiusura: la faccia di chi risponde, accanto al richiamo */
.chiusura-azione{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,28px);margin-top:clamp(28px,4vw,40px);flex-wrap:wrap}
.chiusura-azione .prova-azione{margin-top:0}
.ritratto{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid var(--testo-su-scura);box-shadow:0 10px 30px -16px rgba(0,0,0,.6);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);will-change:transform}
/* il bollo con la faccia di Claudia si ingrandisce al passaggio del mouse: e una
   persona, non un'icona, e il gesto lo dice. Solo dove il mouse esiste davvero. */
@media (hover:hover){
  .ritratto:hover{transform:scale(1.18);box-shadow:0 18px 44px -18px rgba(0,0,0,.75)}
}
@media (prefers-reduced-motion:reduce){
  .ritratto{transition:none}
  .ritratto:hover{transform:none}
}
@media (max-width:600px){
  .chiusura-azione{flex-direction:column;gap:18px}
  .chiusura-azione .prova-azione{width:100%}
}

/* ---- la barra: al posto dei due recapiti, la riga che dice chi risponde */
.barra-riga{font-size:.9375rem;white-space:nowrap;opacity:.9}
@media (max-width:767px){ .barra-riga{display:none} }

/* ---- il blocco "cosa arriva sul bancone": la lista respira di piu' */
#cosa-ricevi .lista-segni li{margin-bottom:12px}

/* ---- le schede appaiate non si stirano: con testi di lunghezza diversa la piu'
   corta lasciava un vuoto grosso quanto mezza scheda. Misurato sullo scatto a 1280. */
#due-bar .prima-dopo,
#per-chi .per-chi{align-items:start}

/* ---- il bottone dell'azione e verde WhatsApp, perche l'azione porta li.
   Testo INCHIOSTRO, non bianco: misurato, bianco su #25D366 fa 1,98:1 e non si legge,
   l'inchiostro fa 8,03:1. Il rosso del brand resta sull'accento del titolo e sui segni. */
.bottone[data-azione]{background:#25D366;color:var(--inchiostro);border-color:#25D366}
.bottone[data-azione]:hover{background:#1EBE5D;border-color:#1EBE5D;color:var(--inchiostro)}
.bottone-linea[data-azione]{background:#25D366;color:var(--inchiostro);border-color:#25D366}
.barra .bottone[data-azione]{background:#25D366;color:var(--inchiostro)}

/* ---- i tre punti brevi (le credenziali) stanno sopra il bottone su schermo grande.
   Su telefono base.css porta l'azione in cima con order:1: senza un ordine loro
   finirebbero PRIMA del bottone e lo spingerebbero sotto la piega. Quindi order:2,
   cioe subito sotto il bottone, e i punti lunghi restano a 3. */
.eroe-punti-brevi{margin:18px 0 20px}
.eroe-punti-brevi li{font-weight:600}
@media (max-width:899px){ .eroe-punti-brevi{order:2;margin:18px 0 0} }

/* ---- l'eroe: la foto sale. Con align-self:end stava solo nella meta bassa e
   lasciava 444px di vuoto sopra (misurato a 1280). Adesso riempie la colonna. */
@media (min-width:900px){
  /* la foto e scontornata e sta a grandezza naturale: non si stira e non si
     ritaglia. Poggia in fondo alla colonna, come vuole la regola .scontornata
     del modello, cosi le due persone stanno sopra la macchia chiara. */
  .eroe-figura{align-self:end;min-height:0}
  .eroe-figura img{height:auto;max-height:min(66vh,620px);width:auto;max-width:100%;
    margin-inline:auto;object-fit:contain;object-position:bottom center}
}

/* ---- il confronto fra nuovi clienti e clienti fedeli, dalla presentazione.
   I segni non possono usare .no e .ok del modello: dentro .fascia-scura il foglio
   comune li riporta tutti al colore d'azione (base.css riga 115). Qui servono
   davvero due segni diversi, quindi hanno classi loro.
   Colori misurati sul prugna #2B1E28: la croce #E8645F fa 4,87:1, il piu #25D366
   fa 8,03:1 ed e lo stesso verde dei bottoni. */
.titolo-confronto{max-width:22ch;margin-inline:auto;text-wrap:balance}
.confronto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start;margin-top:clamp(24px,4vw,40px)}
.confronto-colonna h3{font-family:var(--font-titoli);font-weight:var(--peso-titoli);font-size:clamp(1.25rem,.9rem + 1vw,1.625rem);margin:0 0 18px;letter-spacing:-.01em}
.confronto .lista-segni li{margin:.9em 0;padding-left:36px}
.fascia-scura .confronto .segni-x li::before{
  background:#E8645F;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E");
}
.fascia-scura .confronto .segni-piu li::before{
  background:#25D366;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E");
}
@media (max-width:700px){ .confronto{grid-template-columns:1fr;gap:32px} }

/* ---- i tre punti a tutta pagina, tre colonne, che entrano scorrendo di lato.
   Lo scorrimento e orizzontale per attirare l'occhio, pero parte solo quando la
   fascia entra in vista, cosi non si muove niente mentre si legge.
   Chi ha chiesto meno animazioni li vede fermi e completi: la regola sta dentro
   la media query di base.css, e qui vale lo stesso. */
/* aggancio e rilascio: la sezione e alta in vh e il palco dentro e alto 100vh,
   cosi il progresso si calcola fra due misure nella STESSA unita e la barra del
   browser sul telefono non lo fa saltare. */
.tre-punti-sezione{padding:0;height:165vh;position:relative}
/* il palco e alto quanto basta alle schede, non una schermata intera: con 100vh
   restava un vuoto di quasi 300px sopra e sotto. Resta comunque in vh, cosi il
   progresso si calcola fra due misure della stessa unita. Il top lo centra nella
   schermata, sempre in vh. */
.tre-punti-sezione .palco{position:sticky;top:0;height:100vh;display:grid;align-items:center}
@media (max-width:820px){
  /* sul telefono le tre schede sono in colonna e non ci stanno in una schermata:
     niente aggancio, i punti compaiono scorrendo normalmente */
  .tre-punti-sezione{height:auto;padding:clamp(56px,8vw,88px) 0}
  .tre-punti-sezione .palco{position:static;height:auto;display:block}
}
.tre-punti{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
.punto{background:var(--rilievo);border:1px solid var(--bordo);border-radius:var(--raggio-scheda);
  padding:clamp(26px,3vw,40px);box-shadow:0 14px 34px -26px rgba(0,0,0,.4);
  display:flex;flex-direction:column;justify-content:center;min-height:min(58vh,440px)}
.punto p{margin:0;font-size:clamp(1rem,.92rem + .34vw,1.1875rem);line-height:1.65}
.punto::before{content:"";display:block;width:46px;height:5px;border-radius:3px;
  background:var(--azione);margin-bottom:22px}
@media (max-width:820px){ .tre-punti{grid-template-columns:1fr;gap:18px} }

@media (prefers-reduced-motion:no-preference){
  html.js .scorri{opacity:0;transform:translateX(-56px);
    transition:opacity .6s var(--ease),transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--ritardo,0ms)}
  html.js .scorri.visibile{opacity:1;transform:none}
}

/* ---- l'eroe finisce dove finisce il testo. Il modello forza
   min-height:min(86vh,820px) sul contenitore, e con l'eroe corto restavano
   141px di vuoto sotto «Ti risponde Claudia, in giornata.» */
@media (min-width:900px){
  .eroe .contenitore{min-height:0}
  .eroe-testo{padding-bottom:clamp(28px,3vw,44px)}
}

/* ---- il bottone dell'azione si muove sotto il mouse: si alza, si scurisce di un
   tono e un lampo di luce lo attraversa. Chi ha chiesto meno animazioni vede solo
   il sollevamento, che e un cambio di stato e non un movimento continuo. */
@media (hover:hover) and (pointer:fine){
  .bottone[data-azione]{position:relative;overflow:hidden;
    transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease)}
  .bottone[data-azione]:hover{
    filter:none;
    transform:translateY(-2px) scale(1.015);
    box-shadow:0 14px 30px -12px rgba(37,211,102,.55)}
  .bottone[data-azione]:active{transform:translateY(0) scale(.98)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .bottone[data-azione]::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
    transform:translateX(-130%)}
  .bottone[data-azione]:hover::after{animation:lampo .75s var(--ease) 1}
}
@keyframes lampo{ from{transform:translateX(-130%)} to{transform:translateX(130%)} }

/* ---- le grandi catene: la slide della presentazione, in fascia scura.
   La freccia e il rosso in evidenza sul prugna misurano 4,87:1 con #E8645F:
   il rosso del brand li farebbe 2,92 e non si leggerebbe. */
#grandi-catene .segni-freccia{max-width:46rem;margin:clamp(24px,4vw,36px) auto 0;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem)}
#grandi-catene .segni-freccia li{margin:.85em 0;padding-left:38px}
.fascia-scura .segni-freccia li::before{
  background:#E8645F;width:22px;height:22px;top:.16em;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 4l13 8-13 8z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 4l13 8-13 8z'/%3E%3C/svg%3E");
}
.perche{text-align:center;font-family:var(--font-titoli);font-weight:var(--peso-titoli);
  font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);margin:clamp(30px,4vw,44px) 0 14px;letter-spacing:-.01em}
.perche-riga{text-align:center;font-size:clamp(1.0625rem,1rem + .4vw,1.375rem);line-height:1.5;
  max-width:36rem;margin:0 auto;text-wrap:balance}
.perche-riga strong{color:#E8645F;font-weight:700}

/* ---- gli strumenti: tre gruppi in fila, uniti da un filo che si disegna
   scorrendo. Il filo e l'elemento che da carattere alla sezione e dice che i tre
   gruppi sono una progressione, non tre scatole affiancate. Vedi
   i documenti interni per il perche. */
.titolo-strumenti{max-width:24ch;margin-inline:auto;text-wrap:balance}
.strumenti-gruppi{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,56px);align-items:stretch}
.filo{position:absolute;left:8%;right:8%;top:56px;width:84%;height:40px;z-index:0;pointer-events:none}
/* a riposo il filo e GIA disegnato: senza JavaScript la pagina e completa.
   E il JavaScript, aggiungendo html.js, che si prende il diritto di nasconderlo
   per poi disegnarlo. Lo stato di default e quello finale. */
.filo-tratto{stroke-dasharray:1000;stroke-dashoffset:0}
html.js .filo-tratto{stroke-dashoffset:1000}
.gruppo{position:relative;z-index:1;background:var(--rilievo);border:1px solid var(--bordo);
  border-radius:var(--raggio-scheda);padding:clamp(24px,2.6vw,34px);
  box-shadow:0 14px 34px -26px rgba(0,0,0,.4);
  display:flex;flex-direction:column}
.gruppo-passo{position:absolute;top:-16px;left:clamp(24px,2.6vw,34px);
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--scura);color:var(--testo-su-scura);
  font:700 1.0625rem/1 var(--font-titoli)}
.gruppo-segno{width:96px;height:96px;display:block;margin:10px 0 18px}
.gruppo h3{font-family:var(--font-titoli);font-weight:var(--peso-titoli);
  font-size:clamp(1.125rem,.98rem + .5vw,1.375rem);line-height:1.2;
  margin:0 0 16px;letter-spacing:-.01em;text-wrap:balance}
.gruppo .lista-segni li{margin:.7em 0;padding-left:32px;font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem)}
.gruppo .lista-segni li::before{width:19px;height:19px}
.lista-segni.segni-freccia li::before{
  top:.16em;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 4l13 8-13 8z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 4l13 8-13 8z'/%3E%3C/svg%3E");
}
@media (hover:hover) and (pointer:fine){
  .gruppo{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .gruppo:hover{transform:translateY(-4px);box-shadow:0 22px 46px -28px rgba(0,0,0,.5)}
}
@media (max-width:820px){
  .strumenti-gruppi{grid-template-columns:1fr;gap:34px}
  .filo{display:none}
  .gruppo-segno{width:80px;height:80px}
}

}

/* il filo si disegna quando la fila entra in vista. Senza JavaScript e gia disegnato. */
html.js .filo-tratto{transition:stroke-dashoffset 1.4s cubic-bezier(.33,.72,.3,1) .15s}
html.js .strumenti-gruppi.filo-disegnato .filo-tratto{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  html.js .filo-tratto{transition:none;stroke-dashoffset:0}
}

/* nelle tre schede il grassetto porta l'occhio sulle parole che contano */
.punto strong{font-weight:700;color:var(--inchiostro)}

/* il sottopancia della foto scontornata: una riga sola, larga quanto la colonna,
   appoggiata in fondo. Il modello la fa a riquadro nell'angolo, che su una foto
   senza sfondo resterebbe appesa nel vuoto. */
.eroe-figura.scontornata .didascalia{
  position:absolute;left:0;right:0;bottom:0;border-radius:12px;
  background:var(--rilievo);color:var(--testo-secondario);
  padding:12px 18px;text-align:center;font-size:.9375rem;line-height:1.45;text-wrap:balance;
  box-shadow:0 10px 30px -22px rgba(0,0,0,.45);border:1px solid var(--bordo)}
@media (max-width:899px){
  .eroe-figura.scontornata .didascalia{position:static;margin-top:14px}
}

/* ---- cosa arriva sul bancone: la postazione vera a sinistra, l'elenco a destra */
.bancone{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;
  margin-top:clamp(20px,3vw,32px)}
.bancone-foto{margin:0}
.bancone-foto img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 34px rgba(43,30,40,.22))}
.bancone-testo p:first-child{margin-top:0}
@media (max-width:820px){
  .bancone{grid-template-columns:1fr;gap:26px}
}

/* ---- i momenti della sezione «Tutti gli strumenti».
   Tre cose, tutte legate all'ingresso in vista della scheda e tutte dentro
   prefers-reduced-motion: il numero che si posa, i punti che arrivano a
   cascata, e il segno che si disegna (quello lo fa animazioni.js).
   Senza JavaScript la scheda e completa e ferma: lo stato di riposo e quello
   finale, e la classe .visibile aggiunge il movimento, non il contenuto. */
@media (prefers-reduced-motion:no-preference){
  html.js .gruppo .gruppo-passo{
    transform:scale(.4);opacity:0;
    transition:transform .5s cubic-bezier(.34,1.56,.64,1) .12s,opacity .3s ease-out .12s}
  html.js .gruppo.visibile .gruppo-passo{transform:none;opacity:1}

  html.js .gruppo .lista-segni li{
    opacity:0;transform:translateY(10px);
    transition:opacity .45s ease-out,transform .45s cubic-bezier(.22,.61,.36,1)}
  html.js .gruppo.visibile .lista-segni li{opacity:1;transform:none}
  html.js .gruppo.visibile .lista-segni li:nth-child(1){transition-delay:.62s}
  html.js .gruppo.visibile .lista-segni li:nth-child(2){transition-delay:.74s}
  html.js .gruppo.visibile .lista-segni li:nth-child(3){transition-delay:.86s}
  html.js .gruppo.visibile .lista-segni li:nth-child(4){transition-delay:.98s}
}

/* ---- il conto: la frase a sinistra, il calcolo incolonnato a destra.
   Le etichette in rosso sul prugna usano #E8645F, 4,87:1: il rosso del brand
   li farebbe 2,92 e non si leggerebbe. */
/* overflow-x:clip e non hidden: hidden creerebbe un contesto di scorrimento e
   romperebbe position:sticky altrove nella pagina. Serve perche le righe del
   conto, a riposo, sono traslate di 34px fuori dal contenitore: senza questo la
   pagina scorre di lato di 14px da 320 a 768px (misurato). */
#il-conto{overflow-x:clip}
.conto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.conto-frase{font-size:clamp(1.5rem,1.05rem + 1.9vw,2.625rem);line-height:1.22;margin:0;
  font-family:var(--font-titoli);font-weight:var(--peso-titoli);letter-spacing:-.015em;text-wrap:balance}
.conto-frase strong{color:#E8645F}
.conto-calcolo{text-align:right}
.conto-riga{padding:8px 0}
.conto-riga b{display:block;font-family:var(--font-titoli);font-weight:800;
  font-size:clamp(2.25rem,1.3rem + 3.6vw,4.25rem);line-height:1.02;letter-spacing:-.025em}
.conto-riga span{display:block;font-style:italic;font-weight:700;color:#E8645F;
  font-size:clamp(1.125rem,.95rem + .8vw,1.75rem);line-height:1.15;margin-top:2px}
.conto-totale{position:relative;margin-top:16px;padding-top:20px}
.conto-totale::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:#E8645F;transform-origin:right center}
.segno{display:inline-block;font-style:normal;margin-right:.2em;transform-origin:50% 54%}

/* Il conto si scrive un passaggio alla volta, come alla lavagna: ogni riga
   entra da destra, che e il lato da cui il calcolo e allineato, il segno per
   gira su se stesso mentre arriva e la linea del totale si tira prima che il
   numero grande compaia. A riposo, e con il movimento ridotto, il conto e gia
   tutto li: l'animazione aggiunge il tempo, non l'informazione. */
@media (prefers-reduced-motion:no-preference){
  html.js .conto-riga.rivela{transform:translateX(34px)}
  html.js .conto-riga.rivela.visibile{transform:none}
  html.js .conto-totale.rivela{transform:translateX(34px) scale(.92)}
  html.js .conto-totale.rivela.visibile{transform:none;transition-duration:.6s,.6s}

  html.js .segno{opacity:0;transform:rotate(-315deg) scale(.35)}
  html.js .conto-riga.visibile .segno{opacity:1;transform:none;
    transition:transform .75s cubic-bezier(.18,.9,.25,1.08),opacity .35s linear;
    transition-delay:calc(var(--ritardo,0ms) + 90ms)}

  html.js .conto-totale::before{transform:scaleX(0)}
  html.js .conto-totale.visibile::before{transform:none;
    transition:transform .5s var(--ease);transition-delay:calc(var(--ritardo,0ms) - 240ms)}
}
.conto-totale b{color:#E8645F;font-size:clamp(2.75rem,1.4rem + 4.6vw,5.25rem)}
@media (max-width:820px){
  .conto{grid-template-columns:1fr;gap:26px}
  .conto-calcolo{text-align:left}
  .conto-totale{display:inline-block;min-width:60%}
}

/* ---- «Ecco come ci riusciamo»: tre passi, l'anello attorno al numero si
   disegna quando il passo entra in vista. La circonferenza e nota (r=34,
   quindi 213,6) percio non serve JavaScript per misurarla: basta il CSS, e
   cosi funziona identico su telefono, dove i passi sono in colonna e ognuno
   si anima quando ci arrivi.
   A riposo l'anello e gia chiuso: senza JavaScript la pagina e completa. */
.come-passi{list-style:none;margin:clamp(30px,4vw,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,52px)}
.come-passo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.come-passo p{margin:0;font-size:clamp(1rem,.94rem + .3vw,1.1875rem);line-height:1.55;max-width:26ch}
.come-numero{position:relative;width:clamp(78px,7vw,96px);height:clamp(78px,7vw,96px);flex:none;
  display:grid;place-items:center}
.come-numero b{position:relative;z-index:1;font-family:var(--font-titoli);font-weight:800;
  font-size:clamp(1.75rem,1.2rem + 1.4vw,2.25rem);line-height:1;color:var(--inchiostro)}
.come-anello{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.come-anello circle{fill:none;stroke-width:5}
.anello-fondo{stroke:var(--bordo)}
.anello-tratto{stroke:var(--azione);stroke-linecap:round;stroke-dasharray:213.6;stroke-dashoffset:0}

html.js .anello-tratto{stroke-dashoffset:213.6}
@media (prefers-reduced-motion:no-preference){
  /* il ritardo del passo arriva anche all'anello e al numero, cosi i tre
     si accendono in fila invece che tutti insieme quando stanno nella stessa
     schermata, che e il caso normale del telefono */
  html.js .anello-tratto{transition:stroke-dashoffset 1s cubic-bezier(.33,.72,.3,1);
    transition-delay:calc(var(--ritardo,0ms) + 100ms)}
  html.js .come-numero b{transform:scale(.5);opacity:0;
    transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s ease-out;
    transition-delay:calc(var(--ritardo,0ms) + 350ms)}
  html.js .come-passo.visibile .come-numero b{transform:none;opacity:1}
}
html.js .come-passo.visibile .anello-tratto{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  html.js .anello-tratto{stroke-dashoffset:0;transition:none}
}
@media (max-width:820px){
  .come-passi{grid-template-columns:1fr;gap:34px}
  .come-passo{flex-direction:row;text-align:left;align-items:center;gap:20px}
  .come-passo p{max-width:none}
}

/* ---- il portatile: disegnato, non fotografato. Cosi resta nitido a qualunque
   misura, pesa quanto il CSS che lo descrive e il cruscotto dentro e una
   immagine sola. La cornice e la base usano i grigi del metallo, non i colori
   del brand: un portatile prugna non esiste e si vedrebbe che e finto. */
.portatile{max-width:min(100%,980px);margin:clamp(24px,4vw,40px) auto 0}
.portatile-schermo{
  background:linear-gradient(#3a3a3e,#232327);
  border-radius:14px 14px 4px 4px;
  padding:clamp(9px,1vw,14px) clamp(9px,1vw,14px) clamp(14px,1.4vw,20px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.08)}
.portatile-schermo img{display:block;width:100%;height:auto;border-radius:4px;
  background:#f4f5f7}
.portatile-base{position:relative;height:clamp(12px,1.4vw,18px);
  width:112%;margin-left:-6%;
  background:linear-gradient(#c9cace,#8e9097);
  border-radius:0 0 10px 10px;
  clip-path:polygon(3% 0, 97% 0, 100% 100%, 0 100%);
  box-shadow:0 16px 26px -18px rgba(0,0,0,.6)}
.portatile-base span{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:12%;height:42%;background:rgba(0,0,0,.22);border-radius:0 0 7px 7px}
@media (max-width:600px){
  .portatile-schermo{border-radius:9px 9px 3px 3px}
  .portatile-base{width:108%;margin-left:-4%}
}

/* la base del portatile e piu larga dello schermo, come in un portatile vero:
   sporgendo faceva scorrere la pagina di lato a 768px (misurato, 792 invece di
   768). Si racchiude la sezione, non si stringe la base. */
#pannello{overflow:clip}

/* ---- i sei problemi. L'etichetta scura sporge in alto come nella grafica di
   Francesco. Ogni scheda ha il suo richiamo, che porta alla stessa destinazione
   di tutti gli altri: cambia solo il messaggio gia scritto, cosi chi risponde
   sa di quale problema si parla prima di leggere. */
.problemi{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,34px);
  margin-top:clamp(34px,4vw,48px);align-items:stretch}
.problema{position:relative;display:flex;flex-direction:column;
  background:var(--fascia-chiara);border:1px solid var(--bordo);
  border-radius:var(--raggio-scheda);padding:clamp(40px,3vw,48px) clamp(22px,2.2vw,30px) clamp(22px,2.2vw,28px);
  margin-top:20px}
.problema-etichetta{position:absolute;top:-20px;left:clamp(18px,2vw,26px);
  background:var(--scura);color:var(--testo-su-scura);
  font-family:var(--font-titoli);font-weight:var(--peso-titoli);
  font-size:clamp(1.0625rem,.95rem + .35vw,1.3125rem);line-height:1;
  padding:12px 18px;border-radius:12px;letter-spacing:-.01em}
.problema h3{font-family:var(--font-titoli);font-weight:var(--peso-titoli);
  font-size:clamp(1.0625rem,.96rem + .4vw,1.25rem);line-height:1.25;
  margin:0 0 14px;letter-spacing:-.01em;text-wrap:balance}
.problema p{margin:0 0 18px;font-size:clamp(.9375rem,.9rem + .22vw,1.0625rem);line-height:1.6}
.problema-azione{margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:.45em;min-height:44px;
  color:var(--azione-testo);font-weight:700;text-decoration:none;
  border-bottom:2px solid transparent}
.problema-azione::before{content:"\00BB";font-weight:700}
.problema-azione:hover{border-bottom-color:var(--azione)}
@media (max-width:980px){ .problemi{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .problemi{grid-template-columns:1fr;gap:34px} }

/* ---- chi te lo monta: la foto dello stand accanto al testo */
.chi-siamo-griglia{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,52px);
  align-items:start;margin-top:clamp(18px,2.4vw,28px)}
.chi-siamo-foto{margin:0}
.chi-siamo-foto img{width:100%;height:auto;display:block;border-radius:var(--raggio-scheda);
  box-shadow:0 20px 44px -30px rgba(0,0,0,.5)}
.chi-siamo-testo p:first-child{margin-top:0}
@media (max-width:820px){
  .chi-siamo-griglia{grid-template-columns:1fr;gap:24px}
}

/* ---- Le sei schede dei problemi compaiono una alla volta mentre la pagina
   scorre. Niente palco agganciato come nei tre punti: la griglia da sola e alta
   925px su 1280x900 (misurata), quindi dentro una schermata non ci sta e la
   scena dovrebbe essere alta piu di tre pagine per tenerla ferma. Ogni scheda ha
   il suo osservatore, e dove le colonne sono piu di una il ritardo per colonna
   mette in fila quelle della stessa riga, che altrimenti arriverebbero insieme.
   A riposo, e col movimento ridotto, le schede sono gia tutte li. */
@media (prefers-reduced-motion:no-preference){
  /* Niente scale() qui dentro. Con scale(.97) tutto quello che sta nella scheda
     misura il 3% in meno finche non e rivelato, e un bersaglio da 44px ne misura
     42,68: la sonda lo bocciava, e aveva ragione sul numero e torto sulla causa.
     Una trasformazione sullo stato a riposo mente a chiunque misuri la pagina. */
  html.js .rivela-passo{opacity:0;transform:translateY(34px)}
  html.js .rivela-passo.visibile{opacity:1;transform:none;
    transition:opacity .5s var(--ease),transform .62s var(--ease);
    transition-delay:var(--ritardo,0ms)}
}

/* Il racconto della chiusura sta in corsivo: e una scena immaginata, non una
   promessa contrattuale, e il corsivo lo dice senza doverlo scrivere. L'ultima
   riga, quella che chiede di scrivere, resta dritta: quella e la richiesta vera. */
#chiusura .racconto{font-style:italic}

/* ---- Su telefono l'azione sta in testata, in un bollo tondo accanto al marchio,
   e la barra in basso non c'e. La barra finiva sotto i tasti del browser (visto
   su Safari da iPhone: il tasto verde e la barra di Safari si accavallavano) e
   mangiava un pezzo di schermo a ogni scorrimento. La testata e gia agganciata,
   quindi il bollo resta a tiro per tutta la pagina senza coprire niente.
   48px di lato: sopra il pavimento dei 44. */
.bollo-wa{display:none}
@media (max-width:600px){
  .bollo-wa{display:grid;place-items:center;flex:none;
    width:48px;height:48px;border-radius:50%;background:#25D366;
    box-shadow:0 8px 20px -12px rgba(0,0,0,.5)}
  .bollo-wa svg{width:27px;height:27px;fill:#fff}
  .barra{display:none}
}