/* ==========================================================================
   CORREZIONI FINALI — caricato per ULTIMO, dopo il CSS di pagina.
   Serve a chiudere i difetti di accessibilità dei design ereditati senza
   riscriverli uno per uno: quei fogli usano !important e vincerebbero.
   Ogni regola qui ha una ragione misurata da Lighthouse/axe, non estetica.
   ========================================================================== */

/* 1. Rosa del marchio su fondo CHIARO: #df4f85 dà 3.75:1, sotto la soglia
      WCAG AA (4.5:1). La versione scura del marchio ne dà 5.9:1. */
.evo-contact-page{--evo-pink:#B0245F}
.evo-contact-kicker{color:#B0245F}
.evo-contact-kicker:before{background:#B0245F}

/* 2. Testo scuro su fondo SCURO: nelle fasce di chiusura i design ereditati
      lasciano il colore inchiostro (1.31:1 = illeggibile). */
.cert-cta .cert-kicker,.cert-cta .cert-kicker:before{color:#F5A3C4!important}
.cert-cta .cert-kicker:before{background:#F5A3C4!important}
.cert-cta .cert-lead,.cert-cta p{color:#EFE4F7!important}
.cert-cta a:not(.cert-btn){color:#F7DCEA!important}

/* 3. Link dentro un blocco di testo: il solo colore non basta (WCAG 1.4.1),
      serve un segno non cromatico. Esclusi i pulsanti, che si distinguono
      già per forma e sfondo. */
.prose p a:not(.btn),.prose li a:not(.btn),
.evo-form label a,.evo-form p a,
main p a:not([class*="btn"]):not(.go):not(.card):not(.cert-btn){
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px
}

/* 4. Riga di invio del modulo: su schermo stretto la nota andava a fianco del
      pulsante e si spezzava male. Pulsante sopra, nota sotto. */
.evo-form-azioni{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin:4px 0 0}
.evo-form-nota{color:var(--muted);font-size:15px;line-height:1.5}
@media(max-width:640px){
  .evo-form-azioni{flex-direction:column;align-items:stretch;text-align:left}
  .evo-form-azioni .btn{width:100%}
}

/* ==========================================================================
   5. FASCE SCURE — elenco completo, ricavato leggendo lo sfondo dichiarato in
   TUTTI i CSS di pagina (luminanza < 70), non a memoria. Ogni design ereditato
   ha il suo prefisso (evo-ai-final, evo-lm-final, evo-c-final...) e alcuni
   lasciavano il titolo color inchiostro su fondo viola scuro: il testo c'era
   ma non si vedeva. Qui titoli, testi e occhielli tornano leggibili ovunque.
   ========================================================================== */
.ae-final,.bc-section-deep,.bc-section.bc-deep,.cert-cta,.evo-a-cta,
.evo-ai-final,.evo-b-cta,.evo-c-final,.evo-cta-band,.evo-final,
.evo-lm-final,.evo-p-final,.evo-partner-final,.evo-product-note{color:#EFE7F7}

.ae-final h1,.ae-final h2,.ae-final h3,.ae-final h4,
.bc-section-deep h1,.bc-section-deep h2,.bc-section-deep h3,
.bc-section.bc-deep h1,.bc-section.bc-deep h2,.bc-section.bc-deep h3,
.cert-cta h1,.cert-cta h2,.cert-cta h3,
.evo-a-cta h1,.evo-a-cta h2,.evo-a-cta h3,
.evo-ai-final h1,.evo-ai-final h2,.evo-ai-final h3,
.evo-b-cta h1,.evo-b-cta h2,.evo-b-cta h3,
.evo-c-final h1,.evo-c-final h2,.evo-c-final h3,
.evo-cta-band h1,.evo-cta-band h2,.evo-cta-band h3,
.evo-final h1,.evo-final h2,.evo-final h3,
.evo-lm-final h1,.evo-lm-final h2,.evo-lm-final h3,
.evo-p-final h1,.evo-p-final h2,.evo-p-final h3,
.evo-partner-final h1,.evo-partner-final h2,.evo-partner-final h3,
.evo-product-note h1,.evo-product-note h2,.evo-product-note h3{color:#fff!important}

.ae-final p,.bc-section-deep p,.bc-section.bc-deep p,.cert-cta p,.evo-a-cta p,
.evo-ai-final p,.evo-b-cta p,.evo-c-final p,.evo-cta-band p,.evo-final p,
.evo-lm-final p,.evo-p-final p,.evo-partner-final p,.evo-product-note p,
.ae-final li,.evo-ai-final li,.evo-lm-final li,.evo-p-final li,
.evo-c-final li,.evo-cta-band li{color:#E4D8F0!important}

/* Occhiello (PROSSIMO PASSO) e la sua lineetta: rosa chiaro, sopra 4.5:1. */
.ae-final [class*="kick"],.bc-section-deep [class*="kick"],
.cert-cta [class*="kick"],.evo-a-cta [class*="kick"],
.evo-ai-final [class*="kick"],.evo-b-cta [class*="kick"],
.evo-c-final [class*="kick"],.evo-cta-band [class*="kick"],
.evo-final [class*="kick"],.evo-lm-final [class*="kick"],
.evo-p-final [class*="kick"],.evo-partner-final [class*="kick"],
.ae-final [class*="label"],.evo-ai-final [class*="label"],
.evo-lm-final [class*="label"],.evo-p-final [class*="label"]{color:#F5A3C4!important}
.ae-final [class*="kick"]:before,.evo-ai-final [class*="kick"]:before,
.evo-lm-final [class*="kick"]:before,.evo-p-final [class*="kick"]:before,
.evo-c-final [class*="kick"]:before,.cert-cta [class*="kick"]:before,
.evo-cta-band [class*="kick"]:before,.evo-final [class*="kick"]:before{background:#F5A3C4!important}

/* ==========================================================================
   6. HERO RIEQUILIBRATO — tutte le famiglie
   Il titolo sta SOPRA, a tutta larghezza: prima restava stretto nella colonna
   sinistra su cinque o sei righe con mezza pagina vuota accanto. Sotto, il
   testo a sinistra e la foto a destra.

   La foto tiene la sua altezza naturale e si allinea in alto. Provato ad
   allungarla per pareggiare il testo: dentro alcune figure c'e' un link fra
   il riquadro e l'immagine, l'immagine non riempiva e restava una scatola
   bianca vuota alta fino a 780px. Meglio semplice e sempre giusto.
   ========================================================================== */
@media(min-width:981px){
  [class*="hero-grid"]{align-items:start;row-gap:0;grid-auto-rows:min-content}
  /* Salta le hero rifatte a due colonne vere (quelle con .hero-dx): li' il
     testo resta un blocco unico e non va sparpagliato nella griglia. */
  [class*="hero-grid"]:not(:has(.hero-dx)):not(:has(.hero-scena)) > div:first-child{display:contents}
  [class*="hero-grid"]:not(:has(.hero-dx)):not(:has(.hero-scena)) > div:first-child > span:first-child,
  [class*="hero-grid"]:not(:has(.hero-dx)):not(:has(.hero-scena)) > div:first-child > h1{grid-column:1 / -1}
  [class*="hero-grid"]:not(:has(.hero-scena)) > div:first-child > h1{
    margin-bottom:20px;max-width:none!important;
    /* text-wrap:balance fa righe di lunghezza SIMILE, non righe PIENE:
       e' per questo che restava mezza riga vuota a destra. */
    text-wrap:wrap
  }
  [class*="hero-grid"]:not(:has(.hero-dx)):not(:has(.hero-scena)) > div:first-child > *:not(span:first-child):not(h1){grid-column:1}
  [class*="hero-grid"]:not(:has(.hero-dx)):not(:has(.hero-scena)) > :nth-child(2):not(div:first-child){
    grid-column:2;grid-row:3 / span 4;align-self:start;margin:0
  }
}

/* 7. Rosa #d94f83 su fondo chiaro: 3.89:1, sotto la soglia AA. Nelle 25 pagine
      portfolio è il colore dei valori in grassetto: si scurisce al rosa del
      marchio (#B0245F = 5.9:1), che a occhio è lo stesso colore. */
[class*="evo-case"] strong,[class*="evo-case"] b,
[class*="portfolio"] strong{color:#B0245F}
[class*="evo-case"] .evo-case-lead strong{color:inherit}

/* 8. Fasce scure dichiarate come GRADIENTE: sfuggivano al censimento sul
      colore di sfondo pieno, ma il problema è identico (titolo inchiostro su
      viola scuro). Stessa cura. */
.ae-story,.bc-cta,.bc-page .bc-band,.bc-page section.bc-band,.evo-cta{color:#EFE7F7}
.ae-story h1,.ae-story h2,.ae-story h3,
.bc-cta h1,.bc-cta h2,.bc-cta h3,
.bc-page .bc-band h1,.bc-page .bc-band h2,.bc-page .bc-band h3,
.evo-cta h1,.evo-cta h2,.evo-cta h3{color:#fff!important}
.ae-story p,.bc-cta p,.bc-page .bc-band p,.evo-cta p,
.ae-story li,.bc-cta li,.bc-page .bc-band li,.evo-cta li{color:#E4D8F0!important}
.ae-story [class*="kick"],.bc-cta [class*="kick"],.bc-page .bc-band [class*="kick"],
.evo-cta [class*="kick"],.bc-page .bc-band [class*="label"]{color:#F5A3C4!important}

/* ==========================================================================
   9. LA FASCIA CON LA FOTO
   Una sola immagine, larga quanto lo schermo, con una riga di testo sopra.
   Serve a far vedere che dietro il sito c'e' una persona e un posto veri:
   e' una prova, non un riempitivo — per questo e' grande e sta da sola.
   ========================================================================== */
.fascia-foto{position:relative;margin:0;overflow:hidden;background:var(--soft-2)}
.fascia-foto img{width:100%;height:clamp(320px,42vw,540px);object-fit:cover;object-position:center 42%;display:block}
.fascia-foto figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:88px 26px 34px;
  color:#fff;font-size:clamp(16px,1.5vw,19px);line-height:1.5;
  background:linear-gradient(to top,rgba(20,8,36,.86) 0%,rgba(20,8,36,.5) 45%,transparent 100%)
}
.fascia-foto figcaption b{display:block;font-family:var(--display);font-size:clamp(21px,2.4vw,30px);
  letter-spacing:-.03em;margin-bottom:8px}
@media(min-width:981px){
  .fascia-foto figcaption{padding-inline:max(26px,calc((100vw - var(--wrap)) / 2 + 24px))}
}


/* ==========================================================================
   10. IL BUCO A DESTRA DI OGNI SEZIONE
   Causa, una riga sola in evo.css:  .sec-head{max-width:36em}
   36em a 19px fanno ~680px dentro un contenitore da 1180: da meta' pagina in
   poi, su OGNI sezione di OGNI pagina, non c'era niente. Non era un vuoto
   verticale, quindi il misuratore delle voragini non lo vedeva.

   Non basta togliere il tetto: una riga di testo lunga 1180px non si legge.
   L'intestazione diventa quello che fanno le riviste — titolo grande a
   sinistra, testo di appoggio a destra, appoggiati sulla stessa base. Cosi'
   la larghezza e' piena E la riga resta corta.

   Se il testo di appoggio non c'e', il titolo si prende tutta la riga:
   meglio un titolo lungo che mezza pagina bianca.
   ========================================================================== */
@media(min-width:981px){
  .sec-head:not(.center){
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    column-gap:56px;
    align-items:end;
  }
  .sec-head:not(.center) > .kicker,
  .sec-head:not(.center) > [class*="kicker"]{grid-column:1 / -1}
  .sec-head:not(.center) > h2{grid-column:1;margin:0;text-wrap:wrap}
  .sec-head:not(.center) > .lead,
  .sec-head:not(.center) > p{
    grid-column:2;max-width:none;margin:0;align-self:end;padding-bottom:6px
  }
  /* niente testo di appoggio: il titolo prende tutta la riga */
  .sec-head:not(.center) > h2:last-child{grid-column:1 / -1;max-width:none}
  .sec-head.center{max-width:44em}
}

/* ==========================================================================
   11. HERO DELLA HOME � la colonna destra parte dall'alto
   Prima il pannello del semaforo era centrato in verticale e sopra restava
   un buco alto quanto mezzo schermo. Ora sopra c'e' la foto vera dello
   studio: il buco sparisce e la prima cosa che si vede e' che dietro il
   sito c'e' una persona.
   ========================================================================== */
/* ==========================================================================
   11. HERO DELLA HOME — testo a sinistra, una fotografia grande a destra
   Il pannello del semaforo stava qui e lasciava sopra un buco alto mezzo
   schermo; poi ci ho messo un ritratto in posa scontornato, che pero' era
   fermo e freddo. Ora c'e' una scena di lavoro vera, alta quanto il testo:
   riempie la colonna e racconta il mestiere invece di posare.
   ========================================================================== */
.hero-scena{
  position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);background:var(--soft-2);min-width:0
}
.hero-scena img{
  display:block;width:100%;height:clamp(300px,34vw,470px);object-fit:cover;
  object-position:center 38%
}
.hero-scena figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:80px 24px 22px;
  color:#fff;font-size:15.5px;line-height:1.5;
  background:linear-gradient(to top,rgba(20,8,36,.90),rgba(20,8,36,.5) 55%,transparent)
}
.hero-scena figcaption b{
  display:block;font-family:var(--display);font-size:20px;letter-spacing:-.02em;
  margin-bottom:5px;color:#fff
}
@media(min-width:981px){
  .hero-grid:has(.hero-scena){align-items:center}
}

/* ==========================================================================
   FASCIA DEL SEMAFORO — sotto l'hero, a tutta larghezza
   Dentro la colonna stretta i quattro assi stavano uno sotto l'altro e il
   modulo finiva sotto la piega. Qui il modulo sta in cima, largo, e gli assi
   vanno in riga: si legge tutto senza scorrere.
   ========================================================================== */
.semaforo-fascia{background:var(--soft);padding-block:clamp(44px,5vw,72px)}
.semaforo-fascia .panel{max-width:none;margin:0}
@media(min-width:861px){
  .semaforo-fascia .panel-body .axes{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px
  }
  .semaforo-fascia .panel-body .axis{
    display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline
  }
  .semaforo-fascia .panel-body .axis .track{grid-column:1 / -1}
  .semaforo-fascia .panel-top{align-items:baseline}
}
@media(min-width:641px){
  .semaforo-fascia .panel-body [data-semaforo]{max-width:620px}
}

/* ==========================================================================
   12. LA PAGINA CHE SI TRASCINA DI LATO SUL TELEFONO
   Misurate tutte le 812 pagine su un Pixel 7: 28 sforavano in orizzontale,
   una fino a 2172 px. Su telefono vuol dire pagina che scorre di lato, testo
   che esce dallo schermo e barra dei pulsanti storta.

   La colpa non era della barra (quella si stirava perche' il documento era
   gia' largo): erano immagini, blocchi di codice e tabelle degli articoli
   vecchi, che portano dentro larghezze fisse da WordPress.
   ========================================================================== */
/* Il tetto di larghezza va a TUTTE le immagini. L'altezza automatica invece
   solo dentro il contenuto: applicata a tutte, cancellava l'altezza fissa del
   logo in testata (.brand img{height:54px}), che tornava alla sua dimensione
   naturale e da solo allargava ogni pagina di 253 px sul telefono. */
img,video,iframe,embed,object,svg:not([width]){max-width:100%}
main img,article img,.prose img,figure img{height:auto}
pre,code,kbd,samp{max-width:100%;overflow-wrap:break-word}
pre{white-space:pre-wrap;word-break:break-word;overflow-x:auto}
/* La tabella resta una tabella: lo scorrimento va sul contenitore, altrimenti
   display:block stacca intestazione e didascalia e sforano loro. */
main :has(> table){max-width:100%;overflow-x:auto}
table{max-width:100%;border-collapse:collapse}
.mobile-bar{max-width:100vw;box-sizing:border-box}
/* NIENTE overflow-x:clip su html/body: nasconderebbe lo sforamento invece di
   curarlo, e la misura direbbe "a posto" mentre il documento resta largo.
   Un URL lunghissimo in un paragrafo allarga la pagina come un'immagine: */
main p,main li,main dd,main figcaption,main td{overflow-wrap:break-word}

/* Il tetto sulle immagini del corpo articolo veniva battuto da `.prose > *
   {max-width:none}` (specificita' 0,1,0 contro 0,0,1 di `img`). Bastano
   selettori altrettanto specifici: niente !important. Sette articoli vecchi
   portavano immagini da 2560 px che allargavano la pagina di 2172 px. */
.prose > img,.prose > figure,.prose > p > img,.prose figure img,
.prose > table,.prose > pre,.prose > iframe{max-width:100%;height:auto}

/* Pulsanti con etichetta lunga ("Richiedi un audit di sicurezza gratuito"):
   su schermo stretto uscivano invece di andare a capo. */
.btn{white-space:normal;max-width:100%}

/* ==========================================================================
   13. FASCIA CON FOTO A LARGHEZZA DI CONTENUTO
   Una fotografia sola, larga quanto il testo, con una riga di didascalia.
   Serve dove la pagina e' tutta elenchi e schede: fa capire che dietro c'e'
   una persona che quel lavoro lo fa davvero.
   ========================================================================== */
.fascia-lato{
  margin:0 0 40px;border-radius:var(--r);overflow:hidden;
  background:var(--soft-2);box-shadow:var(--shadow-sm)
}
.fascia-lato img{
  display:block;width:100%;height:clamp(220px,26vw,360px);object-fit:cover;
  object-position:center 45%
}
.fascia-lato figcaption{
  padding:16px 22px 18px;font-size:15.5px;line-height:1.55;color:var(--muted);
  background:var(--card);border-top:1px solid var(--line)
}

/* ==========================================================================
   14. IL CORPO DELL'ARTICOLO CHE ANDAVA DA BORDO A BORDO
   In evo.css c'e' `.prose{max-width:none}`: serviva a togliere il tetto di
   68ch che stringeva il testo a meta' colonna. Ma `.prose` batte `.wrap`
   (stessa specificita', dichiarato dopo), quindi ha tolto anche il limite al
   CONTENITORE: su schermo largo il testo partiva dal bordo della finestra
   mentre il titolo restava a 1180 px, e i due non erano allineati.

   Qui il contenitore torna al suo limite. I figli restano liberi di
   riempirlo — quello era ed e' giusto.
   ========================================================================== */
.wrap.prose{max-width:var(--wrap)}

/* ==========================================================================
   15. UNA SOLA LARGHEZZA PER TUTTA LA COLONNA
   Censite le regole di tutti i CSS di pagina: i contenitori centrati avevano
   sei larghezze diverse — 940, 1100, 1120, 1160, 1280 e 1320 px — contro i
   1180 del contenitore standard. Il risultato: nella stessa pagina il titolo
   partiva da un punto e la fascia sotto da un altro, e lo stacco si vedeva
   (fino a 118 px su una pagina bandi).

   Ogni contenitore di sezione torna a --wrap. Cambia solo il tetto, non il
   respiro interno: il padding di ciascun design resta il suo.
   ========================================================================== */
.bc-page .bc-wrap,
header > .elementor-section > .elementor-container,
.bc-cta,.bc-page .bc-band,.bc-page section.bc-band,
.evo-a-wrap,.evo-breadcrumb,.evoss,
.certificazioni .evo-cert-single-wrap,.evo-cert-single-wrap,
.evo-foto figure{max-width:var(--wrap)}

/* Le griglie di prodotto del negozio seguivano la stessa sorte (1120 px). */
body.post-type-archive-product ul.products,
body.post-type-archive-product .woocommerce-ordering,
body.post-type-archive-product .woocommerce-result-count{max-width:var(--wrap)}

/* ==========================================================================
   16. CONTENITORI RIMASTI SENZA TETTO
   Fra le regole `max-width:none` sparse nei CSS di pagina, la maggior parte
   toglie il limite a un TESTO — ed e' giusto, serviva a non lasciarlo stretto
   a meta' colonna. Tre pero' colpiscono un CONTENITORE, che senza tetto si
   allarga quanto la finestra: su schermo grande il titolo di quella sezione
   partiva dal bordo mentre il resto della pagina stava a 1180.

   Il caso peggiore si chiama `.evo-narrow` — nome che prometteva il contrario.
   ========================================================================== */
.evo-narrow,
.bc-prose,
.elementor-section.elementor-section-boxed > .elementor-container{max-width:var(--wrap)}

/* I blocchi che il generatore aggiunge in coda agli articoli (metodo, prove,
   bandi pertinenti) non avevano contenitore: su una pagina il loro titolo
   partiva a 23 px mentre il testo dell'articolo stava a 392. */
.evo-article,.evo-post-boost,.evo-post-trust{max-width:var(--wrap);margin-inline:auto}

/* ==========================================================================
   17. NIENTE TEMA SCURO AUTOMATICO
   Chi ha il telefono in modalità scura vedeva un sito che nessuno ha mai
   disegnato: la tavolozza si ribaltava da sola (viola pastello su nero,
   pulsanti col testo scuro, fotografie e schermate dei progetti che stonano
   sul fondo). Leggibile sì, ma non e' il sito.

   Il tema chiaro invece e' quello curato: contrasti verificati, foto scelte
   per quel fondo, design ereditati costruiti per quello. Finche' non esiste
   una versione scura fatta apposta, il sito resta chiaro.

   Si disattiva solo l'automatismo: `[data-theme="dark"]` continua a
   funzionare, quindi il giorno che si vorra' un tema scuro vero bastera'
   disegnarlo e accenderlo.
   ========================================================================== */
:root{color-scheme:light}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --violet:#5B168C;--violet-2:#7A2BB8;--violet-soft:#F2EAFA;
    --magenta:#B0245F;--magenta-soft:#FCEDF3;
    --green:#0F766E;--green-soft:#E6F5F3;
    --amber:#B45309;--amber-soft:#FDF3E4;--star:#E0A106;
    --ink:#1A0E2E;--text:#3F3555;--muted:#6E6282;--muted-2:#6F6486;
    --line:#E7E0F0;--line-2:#D6CCE6;
    --page:#FFFFFF;--card:#FFFFFF;--soft:#FAF8FC;--soft-2:#F4F0F9;
    --deep-1:#1B0B33;--deep-2:#2A1150;--deep-3:#3B1A66;
    --on-deep:#F4EFFA;--on-deep-muted:#B3A3CC;
    --shadow-sm:0 8px 24px rgba(26,14,46,.07);
    --shadow:0 22px 60px rgba(26,14,46,.12);
    --shadow-lg:0 34px 90px rgba(26,14,46,.20);
  }
  /* Le poche regole che i CSS di pagina cambiavano a mano nel tema scuro
     (colore del testo dentro i pulsanti pieni) tornano come in chiaro. */
  :root:not([data-theme="dark"]) .evo-terr-btn.forte,
  :root:not([data-theme="dark"]) .evo-terr-btn.forte:hover,
  :root:not([data-theme="dark"]) .evo-terr .evo-form button,
  :root:not([data-theme="dark"]) .evo-terr .evo-form button:hover{color:#fff}

  /* Il marchio ha due versioni, una per fondo chiaro e una per fondo scuro:
     con il tema scuro di sistema compariva quella chiara, che ora finirebbe
     bianca su bianco. Torna quella giusta, in testata e nel piede. */
  /* La regola da battere e' `:root:not([data-theme]) .site-header .brand
     .logo-scuro`: quel `.site-header` in piu' le dava la precedenza, quindi
     va nominato anche qui. */
  :root:not([data-theme="dark"]) .site-header .brand .logo-chiaro,
  :root:not([data-theme="dark"]) .brand .logo-chiaro{display:none}
  :root:not([data-theme="dark"]) .site-header .brand .logo-scuro,
  :root:not([data-theme="dark"]) .brand .logo-scuro{display:block}
  /* Nel piede, che ha fondo scuro suo, resta il marchio chiaro. */
  :root:not([data-theme="dark"]) footer .logo-scuro,
  :root:not([data-theme="dark"]) .ft .logo-scuro{display:none}
  :root:not([data-theme="dark"]) footer .logo-chiaro,
  :root:not([data-theme="dark"]) .ft .logo-chiaro{display:block}
}

/* ==========================================================================
   18. TIPOGRAFIA DEL TELEFONO
   Sullo schermo di un telefono il titolo dell'hero arrivava a 36 px e andava
   su quattro righe: da solo mangiava mezzo schermo. Sotto, un sommario da
   19,5 px con interlinea larga ne prendeva altri 158. Risultato: i pulsanti
   cominciavano a 625 px su una finestra alta 839, cioe' sotto la piega, e la
   fotografia a 794 non si vedeva affatto. Chi apriva il sito dal telefono
   leggeva solo un titolo grande e nient'altro.

   Le misure scendono quel tanto che basta a far entrare titolo, sommario e
   pulsanti nella prima schermata, senza scendere sotto i 16 px sui testi —
   che resta la soglia di leggibilita' e impedisce a iOS di ingrandire da se'
   i campi del modulo.
   ========================================================================== */
@media (max-width:520px){
  .h1-hero,h1.h1-hero{font-size:29px;line-height:1.12;letter-spacing:-.022em}
  .h1-hero .h1-riga1{font-size:19px;line-height:1.25}
  /* la regola da battere e' `.hero p.lead`, non `.lead` */
  .hero p.lead{font-size:17px;line-height:1.55;margin:14px 0 0}
  .hero .eyebrow{font-size:12.5px;padding-block:6px}
  .hero .proof-row{font-size:14px;line-height:1.5;margin-top:14px}
  .hero-cta{gap:10px;margin-top:18px}
  /* meno aria sopra: su una finestra alta 839 px ogni pixel speso prima del
     titolo e' un pixel tolto ai pulsanti */
  .hero{padding-top:38px;padding-bottom:44px}
  .hero-cta .btn{font-size:16px;padding-block:13px}
  /* La fotografia entra prima nella lettura, subito dopo i pulsanti. */
  .hero-scena img{height:clamp(190px,52vw,240px)}
  .hero-scena figcaption{padding:52px 16px 14px;font-size:14px}
  .hero-scena figcaption b{font-size:17px}
}

/* La barra fissa in fondo: "Richiedi un preventivo" andava a capo dentro il
   pulsante, che diventava alto il doppio e storto rispetto all'altro. */
@media (max-width:520px){
  .mobile-bar{padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .mobile-bar .btn{font-size:15px;padding:9px 8px;white-space:nowrap;min-height:0;line-height:1.35}
}
@media (max-width:380px){
  .mobile-bar .btn{font-size:14px;padding-inline:6px}
}