/* ==========================================================================
   LE MISURE DEL SITO — un posto solo.
   Colonna, fianco, marchio e riga della testata stavano scritti tre volte,
   uno per foglio, e non coincidevano: 1240px con il fianco fuori sulla
   vetrina e dentro sul portale (le sezioni partivano 16px piu' a destra),
   marchio 1.1rem sul portale e 1.05 altrove, riga della testata alta 62px
   in un posto e 51 in un altro. Da una pagina all'altra si vedeva ballare.
   Questo foglio lo caricano TUTTE le pagine, per prime.
   ========================================================================== */
:root {
    --colonna: 1240px;
    /* IN PIXEL, non in rem, e non per pigrizia: le due meta' del prodotto
       hanno radici diverse — app.css porta html a 15px per il gestionale, le
       pagine pubbliche restano a 16 — quindi lo stesso "1.1rem" valeva 16.5px
       di qua e 17.6 di la', e il marchio del login del personale cadeva 1px
       piu' a sinistra e mezzo piu' in basso degli altri. Il cromo condiviso
       non puo' dipendere da una radice che cambia. */
    --fianco: 18px;

    /* IL BLU DELLA TESTATA, uno solo per tutto il sito.
       Erano cinque: #0c3247 sul portale, #0b2c40 sui risultati, #092231 sulla
       vetrina, una diagonale #16506f/#0e3247 nell'area cliente e #14415e
       nell'app in spiaggia. Nessuno se ne accorge guardando UNA pagina; si
       vede passando dall'una all'altra, ed e' esattamente la riga che si
       guarda per prima ovunque. Sta qui con la geometria del marchio, perche'
       e' la stessa cosa: il cromo condiviso.
       Il "velo" e' la versione da barra appiccicata, che sta sopra al
       contenuto e ci va sfocata dietro: rgba, o il blur non si vedrebbe. */
    --testata: #0c3247;
    --testata-velo: rgba(12, 50, 71, .94);
}

/* Lo spazio della barra di scorrimento e' sempre riservato: senza, una
   pagina che non scorre e' 15px piu' larga di una che scorre, e tutto cio'
   che sta al centro — a partire dal marchio — si sposta di 7 pixel e mezzo
   passando dall'una all'altra. Succedeva davvero fra /area.html e il resto. */
html { scrollbar-gutter: stable; }

/* IL MODELLO DELLA COLONNA: max-width sull'elemento, fianco DENTRO. */
.colonna { max-width: var(--colonna); margin-inline: auto; padding-inline: var(--fianco); }

/* IL MARCHIO, identico ovunque. */
.po-logo, .pub-logo, .area-logo {
    display: inline-flex; align-items: center; gap: 7px;
    color: #fff; text-decoration: none; line-height: 1.3;
    font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 18px;
}
.po-logo .bi, .pub-logo .bi, .area-logo .bi { color: #f2913f; font-size: 18px; }

/* LA RIGA DELLA TESTATA, alta uguale ovunque: il marchio ci sta in mezzo, e
   finche' le testate avevano altezze diverse — perche' a destra hanno cose
   diverse — il marchio saliva e scendeva di qualche pixel. */
.po-testa-inner, .pub-topbar-inner, .area-testa-inner {
    max-width: var(--colonna); margin-inline: auto;
    padding: 14px var(--fianco);
    min-height: 62px;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}