/* =========================================================
   IL TELEFONO — tre cose che il desktop non chiede
   ---------------------------------------------------------
   Qui sotto non c'e' un layout nuovo: il layout e' gia' stato
   portato giu' dalle @media di ogni componente. Qui ci sono le
   tre cose che dipendono dal MEZZO e non dalla larghezza — il
   display type su una colonna stretta, il dito al posto del
   mouse, e il tocco al posto del passaggio del mouse.
   ========================================================= */

/* --- 1. IL DISPLAY TYPE SULLA COLONNA STRETTA -------------
   Sotto i 420px due titoli hanno una parola che non ci sta:
   «AUTOCERTIFICAZIONI.» (solo nel .shd__t di #certificazioni,
   home — larga 12,1 volte il corpo) e «CONOSCERCI» (.cta__t,
   7,8 volte). A 320px sforavano la pagina di 39px e di 23px —
   non si vedeva, perche' il body ha overflow-x:clip, ma la coda
   della parola veniva tagliata via.
   I due gradini sono calcolati su quei due rapporti e sulla
   colonna vera (larghezza meno 2x --pad, che qui vale 20px):
   a 320px danno 22,4px e 35,2px, cioe' 271px e 274px su 280
   disponibili. A 420px tornano ai valori di prima (28 e 44) e
   da li' in su non cambia niente.
   Il gradino di .shd__t e' scoperto (.cert .shd__t) e non
   generale: misurato il 2026-09-15, applicato a TUTTI i .shd__t
   faceva scendere il titolo di sezione sotto il titolo delle
   celle che gli stanno sotto — stessi peso e larghezza (wght 700,
   wdth 110-112), quindi l'unica differenza percepita e' la
   dimensione. .case__t, .pan h3, .svc__t e .csx__t restano piatti
   a 26px per tutta la fascia telefono (il loro vw non li stacca
   dal pavimento prima di ~600-760px), mentre il .shd__t generale
   ridotto scendeva a 25,2px gia' a 360px: il titolo di sezione
   diventava piu' PICCOLO del titolo del blocco che descrive. Le
   altre venti intestazioni di sezione non hanno parole lunghe
   quanto «AUTOCERTIFICAZIONI.» (la piu' vicina, «certificazioni,»
   di azienda/, e' all'incirca 9,6 volte il corpo: misurato,
   non sfora nemmeno al piano base di 28px — vedi §16.1 CLAUDE.md)
   e non hanno bisogno del gradino: tornano al piano di sempre,
   clamp(28px,4.1vw,60px), che sotto i 683px vale un piatto 28px
   e tiene 2-6px sopra le celle. .case__t, .pan h3, .svc__t e
   .csx__t scendono da 26 a 22px per la stessa ragione — il
   pavimento a 26 lasciava solo 0-2px di distanza dal titolo di
   sezione qui sopra; a 22px il distacco e' 4-6px a ogni larghezza
   verificata (320-430px). .certc__t (i titoli delle due carte
   certificazione) scende da 23 a 20px, altrimenti nella sezione
   CERTIFICAZIONI — l'unica dove il titolo di sezione stesso resta
   ridotto fino a 22,4px a 320px — l'invertirebbe di nuovo. */
@media (max-width:420px){
    .cert .shd__t{font-size:clamp(22px,7vw,28px)}
    .cta__t{font-size:clamp(34px,11vw,44px)}
}

/* Il gradino toglie il taglio della parola, che era il difetto
   vero. NON toglie il fatto che su un telefono un segmento fra
   due <br> possa andare a capo: per farceli stare tutti su una
   riga sola servirebbero 14,5px di corpo a 320px («Stessa sigla,
   dal primo giorno.» e' largo 19,3 volte il corpo), che non e'
   piu' un titolo. Su tre titoli su trenta quel capo lascia una
   parola corta in mezzo — «A» fra «VENGA» e «CONOSCERCI», «UN»
   fra «RICHIEDA» e «INCONTRO.», «NON» fra «CERTIFICAZIONI,» e
   «AUTOCERTIFICAZIONI.». E' cosi' da prima di questo gradino, e
   si toglie spostando il <br> in quei tre titoli: e' una scelta
   di redazione, non di CSS, e cambierebbe anche il desktop.
   E i <br> restano. Spegnerli sotto i 420px, e lasciare andare
   a capo il browser, sembrava piu' pulito: non lo e'. SplitText
   spezza in righe ANCHE sul <br>, che sia in display:none o no,
   quindi il browser rendeva due righe e l'animazione ne montava
   tre, in un altro punto — «SETTORI DIVERSI. / STESSA / SCELTA.»
   dove senza toccare niente ne bastavano due. Provato e tolto.
   Stessa sorte per text-wrap:balance sulle .cta__t: pareggiando
   le righe le portava tutte a una parola («IL SUO / LAVORO /
   STAREBBE / QUI?» su Portfolio). */

/* --- 2. IL DITO AL POSTO DEL MOUSE ------------------------
   I rimandi del sito sono micro-etichette mono da 11px con il
   filetto sotto: alte 19-25px, cioe' meta' di quello che un
   dito trova. Alzarli col padding sposterebbe il filetto e
   l'impaginato; l'area di tocco la porta a 44px un ::before
   trasparente, che non occupa spazio e non si vede.
   Misurato prima di farlo: il vicino piu' stretto sta a 37px
   (il numero verde della fascia arancio), quindi due aree
   allargate non si toccano mai.
   Restano fuori i link DENTRO una frase (.cta__alt a,
   .f__n a): li' allargare l'area vorrebbe dire prendersi le
   righe di testo sopra e sotto, e un tocco storto aprirebbe il
   telefono. Per quelli la regola WCAG 2.5.8 fa eccezione
   esplicita. Restano fuori anche le celle della striscia delle
   aree (.sis__a, 41px): sono contigue per disegno, allargarle
   vorrebbe dire sovrapporle. */
@media (pointer:coarse){
    .lnk,a.rec__v,.mod__voce a,.pfc__pa dd a{position:relative}
    .lnk::before,a.rec__v::before,
    .mod__voce a::before,.pfc__pa dd a::before{
        content:'';position:absolute;left:0;right:0;top:50%;
        height:44px;transform:translateY(-50%);
    }
    /* la casella del consenso: 22px stavano sotto il minimo di
       24px. 26 la tengono quadrata e visibile senza cambiare il
       disegno — il segno di spunta cresce con lei. */
    .f--ok input[type=checkbox]{width:26px;height:26px}
    .f--ok input[type=checkbox]::before{width:14px;height:14px}
}

/* --- 3. IL TOCCO AL POSTO DEL PASSAGGIO DEL MOUSE ---------
   Su un telefono il :hover non esiste: o non scatta, o resta
   attaccato dopo il tocco. Le celle grandi — che sono il modo
   in cui si naviga questo sito — non davano nessun segno di
   essere state premute prima che la pagina cambiasse.
   Qui ognuna dice "ti ho sentito" mentre il dito e' giu':
   lo stesso stato del passaggio del mouse, sull'istante del
   tocco. Niente di nuovo da imparare, e nessuna proprieta' di
   layout animata — fondo, colore e transform (CLAUDE.md par. 6,
   regola 2). */
@media (hover:none){
    .area:active{background:var(--coal-2);color:var(--on-dark)}
    .area:active::after{transform:none}
    .area:active .area__go{color:var(--orange)}
    .area:active .area__go i{transform:translateX(7px)}

    .altra:active{background:var(--coal-3)}
    .altra:active .altra__t{color:var(--orange)}
    .altra:active .altra__t i{transform:translateX(7px)}

    .loc__go:active .loc__go-a{transform:translate(3px,-3px)}
    .hdr__go:active{background:var(--bone);color:var(--on-light)}
    .mmenu__a:active{color:var(--orange)}
    .mmenu__a:active .mmenu__ar{transform:translateX(7px)}
    .mmenu__go:active .mmenu__go-a{transform:translateX(5px)}

    .lnk:active{opacity:1;color:var(--orange)}
    .lnk:active::after{transform:translateX(5px)}
    .pfc__pa a:active{opacity:.7}

    .sis__a:active{background:var(--coal-2)}
    .cell:active {background:var(--coal-2)}
    /* le celle chiare (.blk--bone) hanno testo scuro: lo stesso
       scurimento le renderebbe illeggibili, quasi nere. Sul chiaro
       il passo e' l'opposto, come per .pick/.fesito__b sotto —
       si scende di un tono, da --bone a --bone-2. */
    .cell.blk--bone:active{background:var(--bone-2)}

    /* il modulo: la cella dell'area e il bottone. Sul chiaro il
       passo e' l'opposto — si scende di un tono, non si sale. */
    .pick:active{background:var(--bone)}
    .fgo:active .fgo__a{transform:translateX(5px)}

}