/* come-sempre.css · le regole del design system di come sempre che la base della
   landing non conosce. Si carica dopo pagina.css.
   Unbounded solo per le voci grandi (h1, h2, i numeri del conto); tutto il resto Figtree.
   Il corallo sta sui blocchi, sui bottoni e sui segni; il testo resta d'inchiostro,
   e sulle fasce scure e accento-su-scura. Niente corsivo, niente gradienti. */

/* i titoli: Unbounded e largo, una riga tiene circa un quinto di caratteri in meno */
h1{font-size:clamp(1.875rem,1.25rem + 2.9vw,3.125rem);line-height:1.08;letter-spacing:-.025em}
h2{font-size:clamp(1.5rem,1.1rem + 1.9vw,2.375rem);line-height:1.12;letter-spacing:-.02em}
h3,h4,.confronto-colonna h3,.gruppo h3,.problema h3,.perche,.come-numero b,.gruppo-passo,
.passi li::before,.eroe-figura .didascalia b{font-family:var(--font-testo);letter-spacing:-.015em}

/* il marchio in testata: sempre il file, mai ricomposto; minimo 120px di larghezza */
.marchio img{height:auto;width:200px;max-width:none}
@media (max-width:400px){.marchio img{width:150px}}

/* l'accento del titolo: inchiostro con la sottolineatura corallo */
em.accento{color:var(--scura);text-decoration:underline;text-decoration-color:var(--azione);
  text-decoration-thickness:.14em;text-underline-offset:.12em;text-decoration-skip-ink:none}
.fascia-scura em.accento{color:var(--accento-su-scura)}

/* i bottoni: hover e premuto schiariscono il corallo, l'inchiostro sopra sale a 5,66 e 6,55 */
@media (hover:hover) and (pointer:fine){
  .bottone:hover{filter:none;background:var(--azione-hover)}
  .bottone-linea:hover{background:var(--azione-hover);color:var(--testo-su-azione)}
}
.bottone:active{background:var(--azione-attivo)}
.bottone:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--scura);outline-offset:3px}
.fascia-scura .bottone:focus-visible,.fascia-scura a:focus-visible{outline-color:var(--accento-su-scura)}

/* sulle fasce scure: i segni in corallo, il testo in evidenza in accento-su-scura */
.fascia-scura .confronto .segni-x li::before,
.fascia-scura .segni-freccia li::before,
.conto-totale::before{background:var(--azione)}
.perche-riga strong,.conto-frase strong{color:var(--accento-su-scura);
  text-decoration:underline;text-decoration-color:var(--azione);text-decoration-thickness:.12em;text-underline-offset:.14em}
.conto-riga span{font-style:normal;color:var(--accento-su-scura);opacity:.86}
.conto-totale b{color:var(--accento-su-scura)}
#chiusura .racconto{font-style:normal}

/* il numero dei gruppi: un pallino corallo con l'inchiostro sopra */
.gruppo-passo{background:var(--azione);color:var(--testo-su-azione)}

/* il ritratto di Claudia sta gia sul corallo: niente bordo chiaro attorno */
.ritratto{background:var(--azione)}

/* la foto di «Chi c'è dietro» e scontornata sul corallo: niente cornice ne ombra */
.chi-siamo-foto img{box-shadow:none;border-radius:0;background:none}

/* i bottoni WhatsApp sono corallo come ogni bottone primario:
   testo e icona in inchiostro-900, 4,97 sul corallo; hover e premuto schiariscono */
.bottone[data-azione],.bottone-linea[data-azione],.barra .bottone[data-azione]{
  background:var(--azione);color:var(--testo-su-azione);border-color:var(--azione)}
@media (hover:hover) and (pointer:fine){
  .bottone[data-azione]:hover{background:var(--azione-hover);border-color:var(--azione-hover);color:var(--testo-su-azione)}
}
.bottone[data-azione]:active{background:var(--azione-attivo);border-color:var(--azione-attivo)}
@media (max-width:600px){
  .bollo-wa{background:var(--azione)}
  .bollo-wa svg{fill:var(--testo-su-azione)}
}