/* ==========================================================================
   Pizza EAT — sito istituzionale.

   Un solo file, nessun preprocessore, nessun CDN. L'ordine della cascata si
   tiene con @layer invece che con la specificita': senza build step, una
   guerra di !important e' questione di settimane.

   I colori sono quelli veri del prodotto, campionati dal pannello:
   verde #1FAA32 (azione), arancio #FF9D00 (marchio), inchiostro #1C1917,
   e neutri CALDI, non grigi — il pannello «non schiarisce, si scalda».

   Trappola gia' pagata nelle app: l'arancio del marchio su bianco fa 2,1:1.
   Non porta MAI testo. Vive nei riempimenti, nei bordi e nelle decorazioni,
   e il testo sopra l'arancio e' scuro (#2B1608).
   ========================================================================== */

@layer reset, base, layout, componenti, sezioni, utility;

/* ==========================================================================
   Font
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  /* Serve agli accenti di tedesco, francese e spagnolo: senza, «Français»
     ricadrebbe sul font di sistema solo per la cediglia. */
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-latin-ext.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Token
   ========================================================================== */

:root {
  /* Marchio */
  --verde:        #1FAA32;
  --verde-scuro:  #16803A;
  --verde-testo:  #157A26;   /* il verde pieno su crema fa 3,4:1: per il testo serve questo */
  --arancio:      #FF9D00;
  --arancio-su:   #2B1608;   /* 8,25:1 sopra l'arancio */
  --ambra:        #F0A824;
  --rosso:        #D92D20;
  --blu:          #2B6CD4;
  --ink:          #1C1917;

  /* Neutri caldi */
  --pagina:   #FAF6EF;
  --crema:    #F6F1E9;
  --carta:    #FFFFFF;
  --chip:     #F5F0E8;
  --bordo:    #E7E2DB;
  --bordo-2:  #E0DAD1;
  --t-1: #3F3A35;
  --t-2: #57504A;
  --t-3: #7C736B;
  --t-4: #A8A29E;

  /* Superfici scure */
  --scuro:    #1C1917;
  --scuro-2:  #241F1C;
  --scuro-3:  #2B2420;
  --scuro-bordo: #3A3430;
  --su-scuro:    #F6F1E9;
  --su-scuro-2:  #B9B1A8;

  /* Spazi, su base 4 */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;   --s9: 6rem;

  /* Raggi — generosi come nel prodotto */
  --r1: 8px; --r2: 12px; --r3: 18px; --r4: 24px; --pillola: 999px;

  --ombra-1: 0 1px 2px rgba(28,25,23,.05), 0 2px 8px rgba(28,25,23,.04);
  --ombra-2: 0 2px 6px rgba(28,25,23,.06), 0 12px 32px rgba(28,25,23,.10);
  --ombra-3: 0 8px 24px rgba(28,25,23,.10), 0 32px 64px rgba(28,25,23,.14);

  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --largo:   1200px;
  --medio:   980px;
  --stretto: 720px;
  --misura:  66ch;

  --nav-h: 60px;

  /* Colori attivi nella sezione corrente. Le sezioni scure li ribaltano,
     e i componenti leggono solo questi: cosi' una scheda funziona su chiaro
     e su scuro senza una seconda regola. */
  --sfondo:     var(--pagina);
  --superficie: var(--carta);
  --testo:      var(--ink);
  --testo-2:    var(--t-2);
  --testo-3:    var(--t-3);
  --linea:      var(--bordo);
  --accento:    var(--verde-testo);
}

/* ==========================================================================
   Reset
   ========================================================================== */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Sotto la barra fissa: senza, un'ancora finisce nascosta dalla nav. */
    scroll-padding-top: calc(var(--nav-h) + var(--s4));
  }

  body {
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--testo);
    background: var(--sfondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Il corpo non scorre MAI in orizzontale: i blocchi larghi scorrono
       dentro il proprio contenitore. */
    overflow-x: hidden;
  }

  img, svg, picture, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; }
  ul, ol { list-style: none; padding: 0; }
  h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
  p { text-wrap: pretty; }
  table { border-collapse: collapse; }

  /* L'evidenziatore. Il giallo pieno del browser su fondo crema stona e
     abbassa il contrasto del testo: qui e' l'ambra del marchio annacquata,
     che resta un evidenziatore ma appartiene alla tavolozza.

     `box-decoration-break: clone` non e' un dettaglio: senza, una frase
     evidenziata che va a capo perde il riempimento alle estremita' e sembra
     tagliata. */
  mark {
    background: color-mix(in srgb, var(--ambra) 38%, transparent);
    color: inherit;
    padding: .06em .18em;
    border-radius: var(--r1);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  /* Sul fondo scuro l'ambra annacquata sparirebbe: li' serve piu' colore. */
  .sez--scura mark { background: color-mix(in srgb, var(--ambra) 30%, transparent); }

  :focus-visible {
    outline: 3px solid var(--verde);
    outline-offset: 2px;
    border-radius: var(--r1);
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

@layer base {
  .h1 { font-size: clamp(2.1rem, 1.35rem + 3.2vw, 4rem); letter-spacing: -.035em; }
  .h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.7rem); letter-spacing: -.03em; }
  .h3 { font-size: clamp(1.15rem, 1.02rem + .55vw, 1.45rem); }
  .h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }

  .guida  { font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); color: var(--testo-2); max-width: var(--misura); }
  .picco  { font-size: .9375rem; color: var(--testo-2); }
  .minuto { font-size: .8125rem; color: var(--testo-3); }

  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  /* Occhiello: la riga che dice di cosa parla la sezione. */
  .occhiello {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-size: .75rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--accento);
  }
  .occhiello::before {
    content: ''; width: 18px; height: 2px; border-radius: 2px;
    background: currentColor; opacity: .55;
  }

  .lede { max-width: var(--misura); }
  strong, b { font-weight: 700; }
}

/* ==========================================================================
   Layout
   ========================================================================== */

@layer layout {
  .cont { width: 100%; max-width: var(--largo); margin-inline: auto; padding-inline: var(--s5); }
  .cont--medio   { max-width: var(--medio); }
  .cont--stretto { max-width: var(--stretto); }

  .sez { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); position: relative; }
  .sez > .cont > * + * { margin-top: var(--s5); }

  /* Sezioni scure: ribaltano i token, tutto il resto si adegua da solo. */
  .sez--scura {
    --sfondo:     var(--scuro);
    --superficie: var(--scuro-2);
    --testo:      var(--su-scuro);
    --testo-2:    var(--su-scuro-2);
    --testo-3:    #8B837B;
    --linea:      var(--scuro-bordo);
    --accento:    var(--arancio);
    background: var(--sfondo);
    color: var(--testo);
  }
  .sez--crema { background: var(--crema); }

  .testata { max-width: 46rem; }
  .testata > * + * { margin-top: var(--s3); }
  .testata--centro { margin-inline: auto; text-align: center; }
  .testata--centro .guida, .testata--centro .lede { margin-inline: auto; }

  .griglia { display: grid; gap: var(--s5); }
  .g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

  /* Due colonne con il testo che resta agganciato mentre scorre la figura. */
  .duo { display: grid; gap: var(--s6); align-items: start; }
  @media (min-width: 900px) {
    .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s7); }
    .duo--inverso > :first-child { order: 2; }
    .duo__ferma { position: sticky; top: calc(var(--nav-h) + var(--s5)); }
  }

  /* Sotto la piega il browser puo' saltare il calcolo finche' non serve.
     Su una pagina lunga con venti schermate ricostruite e' il guadagno piu'
     grande di tutto il file.

     `auto` davanti alle misure non e' un vezzo: senza, una sezione gia'
     disegnata che esce dallo schermo torna a valere la stima, e la pagina si
     accorcia sotto le mani di chi scorre. Con `auto` il browser si ricorda
     l'altezza vera e la riusa.

     Le due righe sono volute. `auto` dentro `contain-intrinsic-size` non lo
     capiscono i browser piu' vecchi di Safari 17, e la riga che non si capisce
     si butta via intera: senza la prima si ritroverebbero le sezioni alte
     zero, cioe' molto peggio di una stima approssimativa. */
  .sez:not(#hero):not(#numeri) {
    content-visibility: auto;
    contain-intrinsic-size: 0 800px;
    contain-intrinsic-size: auto 0 auto 800px;
  }

  /* Arrivando da un'altra pagina con un'ancora — `/#prezzi` cliccato dal blog
     — il browser decide DOVE saltare prima di disegnare le sezioni: al posto
     delle altezze vere trova la stima qui sopra, che sulla home sbaglia di
     quasi quattromila pixel, e si atterra su tutt'altra sezione.

     Quando c'e' un'ancora, quindi, la pagina si misura per intero: e'
     l'unico caso in cui l'ottimizzazione non si puo' tenere, perche' il
     numero che fa risparmiare e' proprio quello che serve giusto. La classe
     la mette lo script nel <head> (`PE_SCRIPT_JS`), prima che il browser
     calcoli il salto; `js/sito.js` la rimette per i salti fatti da dentro la
     pagina. */
  .ancora .sez:not(#hero):not(#numeri) { content-visibility: visible; }
}

/* ==========================================================================
   Componenti
   ========================================================================== */

@layer componenti {

  /* --- Bottoni ------------------------------------------------------------ */

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: 48px; padding: var(--s3) var(--s5);
    border-radius: var(--pillola);
    font-weight: 700; font-size: .9375rem; letter-spacing: -.01em;
    text-decoration: none; white-space: nowrap;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
    touch-action: manipulation;
  }
  .btn:active { transform: translateY(1px); }

  .btn--primo {
    background: var(--verde); color: #fff;
    box-shadow: 0 1px 2px rgba(21,122,38,.3), 0 8px 20px rgba(31,170,50,.24);
  }
  .btn--primo:hover { background: var(--verde-scuro); }

  .btn--fantasma {
    border: 1.5px solid var(--linea); color: var(--testo);
    background: color-mix(in srgb, var(--superficie) 70%, transparent);
  }
  .btn--fantasma:hover { border-color: var(--testo-3); }

  .btn--pieno { width: 100%; }
  /* 44 px anche sui bottoni secondari: e' la misura sotto la quale un dito
     sbaglia, e non dipende da quanto e' importante il bottone. */
  .btn--piccolo { min-height: 44px; padding: var(--s2) var(--s4); font-size: .875rem; }

  .btn[disabled], .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

  .btn-riga { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

  /* --- Schede ------------------------------------------------------------- */

  .scheda {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r3);
    padding: var(--s5);
    box-shadow: var(--ombra-1);
  }
  .scheda > * + * { margin-top: var(--s3); }
  .scheda--liscia { box-shadow: none; }
  .scheda--alta { padding: var(--s6); border-radius: var(--r4); }

  .scheda__icona {
    width: 42px; height: 42px; border-radius: var(--r2);
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--arancio) 16%, transparent);
    color: var(--accento);
    flex: none;
  }
  .sez--scura .scheda__icona { background: color-mix(in srgb, var(--arancio) 20%, transparent); }

  /* --- Elenchi con spunta -------------------------------------------------- */

  .spunte { display: grid; gap: var(--s3); }
  /* Sotto una schermata a tutta larghezza un elenco su una colonna sola
     diventa una striscia lunghissima: qui si spande. */
  .spunte--colonne {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: var(--s3) var(--s6);
  }
  .spunte li {
    display: grid; grid-template-columns: 22px 1fr; gap: var(--s3);
    align-items: start; color: var(--testo-2);
  }
  .spunte li::before {
    content: ''; margin-top: .38em;
    width: 18px; height: 18px; border-radius: 50%;
    background: color-mix(in srgb, var(--verde) 18%, transparent);
    /* La spunta e' disegnata, non un carattere: un font di ripiego
       cambierebbe il segno e la riga si sfalserebbe. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231FAA32' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 12px; background-position: center; background-repeat: no-repeat;
  }
  .sez--scura .spunte li::before {
    background-color: color-mix(in srgb, var(--arancio) 22%, transparent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF9D00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }

  /* --- Briciole di pane ---------------------------------------------------- */

  /* Le usano il blog e /guide/: stanno qui e non in uno dei due fogli di
     pagina, perche' due copie sarebbero due posti da tenere uguali. */
  .briciole {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
    font-size: .8125rem; color: var(--testo-3);
  }
  .briciole a { color: var(--testo-3); text-decoration: none; }
  .briciole a:hover { color: var(--testo); text-decoration: underline; }

  /* --- Pillole e distintivi ------------------------------------------------ */

  .pillole { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .pillola {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: .3rem .75rem; border-radius: var(--pillola);
    background: color-mix(in srgb, var(--superficie) 85%, transparent);
    border: 1px solid var(--linea);
    font-size: .8125rem; font-weight: 600; color: var(--testo-2);
  }
  .pillola--arancio {
    background: var(--arancio); border-color: transparent;
    color: var(--arancio-su); font-weight: 800;
  }
  .pillola--verde {
    background: color-mix(in srgb, var(--verde) 15%, transparent);
    border-color: color-mix(in srgb, var(--verde) 32%, transparent);
    color: var(--verde-testo);
  }
  .sez--scura .pillola--verde { color: #6EE7A3; }

  /* --- Numerazione dei passi ----------------------------------------------- */

  .passi { counter-reset: passo; display: grid; gap: var(--s5); }
  .passo { display: grid; grid-template-columns: 44px 1fr; gap: var(--s4); align-items: start; }
  .passo__n {
    counter-increment: passo;
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--superficie); border: 1.5px solid var(--linea);
    font-family: var(--mono); font-weight: 700; font-size: .95rem;
    color: var(--accento);
  }
  .passo__n::before { content: counter(passo, decimal-leading-zero); }
  .passo__c > * + * { margin-top: var(--s1); }

  /* --- Rivelazione allo scorrimento ---------------------------------------
     Gli elementi sono VISIBILI di default: lo stato nascosto vive sotto .js,
     che aggiunge uno script minuscolo nel head. Se il JavaScript non parte,
     la pagina non puo' restare bianca. */

  .js [data-rivela] { opacity: 0; transform: translateY(14px); }
  .js [data-rivela].visibile {
    opacity: 1; transform: none;
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
  }
  @media (prefers-reduced-motion: reduce) {
    .js [data-rivela] { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   Barra di navigazione
   ========================================================================== */

@layer componenti {
  .salta {
    position: absolute; left: var(--s4); top: var(--s2); z-index: 100;
    transform: translateY(-200%);
    background: var(--ink); color: #fff; padding: var(--s2) var(--s4);
    border-radius: var(--r1); text-decoration: none; font-weight: 700;
  }
  .salta:focus { transform: none; }

  .nav {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--pagina) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    padding-top: env(safe-area-inset-top);
    transition: border-color .2s ease, background-color .2s ease;
  }
  .nav[data-scorso="1"] { border-bottom-color: var(--bordo); }

  .nav__in {
    height: var(--nav-h);
    display: flex; align-items: center; gap: var(--s5);
  }
  .nav__logo {
    display: flex; align-items: center; flex: none; text-decoration: none;
    min-height: 44px; /* zona toccabile, non altezza del marchio */
  }
  .nav__logo img { height: 30px; width: auto; }

  .nav__voci { display: none; gap: var(--s5); margin-left: auto; }
  .nav__voce {
    text-decoration: none; font-size: .9rem; font-weight: 600; color: var(--t-2);
    padding: var(--s2) 0; border-bottom: 2px solid transparent;
  }
  .nav__voce:hover { color: var(--ink); border-bottom-color: var(--arancio); }

  .nav__azioni { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }

  /* Selettore lingua: dettagli nativi, quindi funziona anche senza JS. */
  .lingua { position: relative; }
  .lingua > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: var(--s2);
    min-height: 44px; padding: 0 var(--s3);
    border: 1px solid var(--bordo); border-radius: var(--pillola);
    font-size: .8125rem; font-weight: 700; letter-spacing: .04em;
  }
  .lingua > summary::-webkit-details-marker { display: none; }
  .lingua__giu { transition: transform .2s ease; }
  .lingua[open] .lingua__giu { transform: rotate(180deg); }
  .lingua__menu {
    position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 70;
    min-width: 11rem; padding: var(--s2);
    background: var(--carta); border: 1px solid var(--bordo);
    border-radius: var(--r2); box-shadow: var(--ombra-2);
  }
  .lingua__menu a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    min-height: 44px; padding: var(--s2) var(--s3); border-radius: var(--r1);
    text-decoration: none; font-size: .9rem; font-weight: 600;
  }
  .lingua__menu a:hover { background: var(--chip); }
  .lingua__menu a[aria-current="true"] { color: var(--verde-testo); }
  .lingua__cod { font-family: var(--mono); font-size: .75rem; color: var(--t-3); }

  .nav__apri { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r2); }
  .nav__apri:hover { background: var(--chip); }

  /* Menu a scomparsa sul telefono.
     `padding-block` e non `padding`: il margine ai lati lo da' `.cont`, e la
     scorciatoia lo azzerava — le voci finivano attaccate al bordo dello
     schermo. */
  .nav__mobile {
    display: none;
    padding-block: var(--s4) var(--s5);
    border-top: 1px solid var(--bordo);
  }
  .nav__mobile[data-aperto="1"] { display: block; }
  .nav__mobile a {
    display: block; padding: var(--s3) 0;
    text-decoration: none; font-weight: 700; font-size: 1.05rem;
    border-bottom: 1px solid var(--bordo);
  }

  @media (min-width: 1060px) {
    .nav__voci { display: flex; }
    /* Qui dentro e non fuori: a spingere le voci a destra e' `.nav__voci`,
       e lo fa solo quando si vede. Fuori da questa soglia il selettore
       scattava lo stesso — il fratello c'e' anche con `display: none` — e
       sul telefono lingua e menu finivano incollati al logo. */
    .nav__voci + .nav__azioni { margin-left: 0; }
    .nav__apri { display: none; }
    .nav__mobile { display: none !important; }
  }
  @media (max-width: 520px) {
    .nav__azioni .btn { display: none; }
  }
}

/* ==========================================================================
   Sezioni
   ========================================================================== */

@layer sezioni {

  /* --- Hero ---------------------------------------------------------------- */

  #hero {
    --sfondo:     var(--scuro);
    --superficie: var(--scuro-2);
    --testo:      var(--su-scuro);
    --testo-2:    var(--su-scuro-2);
    --linea:      var(--scuro-bordo);
    --accento:    var(--arancio);
    background: var(--scuro); color: var(--su-scuro);
    padding-top: clamp(2.5rem, 1rem + 6vw, 5rem);
    overflow: hidden;
  }
  /* Alone caldo dietro il titolo: e' cio' che tiene il fondo scuro da sembrare
     un buco nero, senza mettere una foto pesante. */
  #hero::before {
    content: ''; position: absolute; inset: -30% -10% auto -10%; height: 70%;
    background:
      radial-gradient(60% 60% at 25% 40%, rgba(255,157,0,.16), transparent 70%),
      radial-gradient(50% 50% at 75% 20%, rgba(31,170,50,.14), transparent 70%);
    pointer-events: none;
  }
  #hero > .cont { position: relative; }

  .hero__griglia { display: grid; gap: var(--s7); align-items: center; }
  @media (min-width: 1000px) {
    .hero__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s8); }
  }
  .hero__testo > * + * { margin-top: var(--s4); }
  .hero__titolo { color: #fff; }
  .hero__titolo em { font-style: normal; color: var(--arancio); }
  .hero__nota { display: flex; align-items: center; gap: var(--s2); color: var(--testo-2); font-size: .875rem; }

  .hero__figura { position: relative; }

  /* Il key visual e' un quadrato con dentro una fotografia: sul fondo scuro
     dell'apertura resterebbe un rettangolo bianco appiccicato addosso. Gli
     angoli tondi e il filo di bordo lo rendono un oggetto voluto, e l'alone
     caldo dietro lo tiene attaccato allo sfondo invece che sopra. */
  .hero__logo {
    width: min(100%, 27rem);
    height: auto;
    margin-inline: auto;
    border-radius: var(--r4);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: var(--ombra-3);
  }
  .hero__figura::before {
    content: ''; position: absolute; inset: 8% 4% -6% 4%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255,157,0,.22), transparent 70%);
    filter: blur(34px); z-index: -1; pointer-events: none;
  }
  @media (max-width: 999px) {
    .hero__logo { width: min(100%, 21rem); }
  }

  /* --- Numeri --------------------------------------------------------------- */

  #numeri { background: var(--crema); padding-block: var(--s6); border-bottom: 1px solid var(--bordo); }
  .numeri {
    display: grid; gap: var(--s5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    text-align: center;
  }
  .numero__n {
    font-family: var(--mono); font-weight: 700;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    letter-spacing: -.03em; color: var(--ink);
  }
  .numero__t { font-size: .8125rem; color: var(--t-3); line-height: 1.35; }

  /* --- Tabelloni delle app -------------------------------------------------- */

  .app__tab {
    display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center;
    padding: var(--s2); border-radius: var(--pillola);
    background: var(--chip); border: 1px solid var(--bordo);
    width: fit-content; max-width: 100%;
  }
  /* Sul telefono i tre nomi non stanno in fila: il terzo andava a capo da solo
     e restava incollato a sinistra, come se fosse fuori posto. Qui la barra si
     prende tutta la larghezza e i nomi si mettono uno sotto l'altro, tutti
     della stessa misura. Il `justify-content` qui sopra serve alle larghezze
     intermedie, dove il ritorno a capo capita solo in certe lingue: li' almeno
     l'ultimo resta in mezzo. */
  @media (max-width: 560px) {
    .app__tab { width: 100%; }
    .app__tab button { flex: 1 1 100%; }
  }
  .sez--scura .app__tab { background: var(--scuro-3); border-color: var(--scuro-bordo); }
  .app__tab button {
    min-height: 44px; padding: 0 var(--s4);
    border-radius: var(--pillola); font-size: .875rem; font-weight: 700; color: var(--testo-2);
    transition: background-color .18s ease, color .18s ease;
  }
  .app__tab button[aria-selected="true"] {
    background: var(--ink); color: #fff;
  }
  .sez--scura .app__tab button[aria-selected="true"] { background: var(--arancio); color: var(--arancio-su); }

  .app__pannelli > [role="tabpanel"][hidden] { display: none; }

  /* --- Sera di servizio ------------------------------------------------------ */

  .sera { display: grid; gap: var(--s5); counter-reset: tappa; }
  @media (min-width: 700px)  { .sera { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1060px) { .sera { grid-template-columns: repeat(3, 1fr); } }

  .tappa { position: relative; padding-top: var(--s5); }
  .tappa::before {
    counter-increment: tappa; content: counter(tappa);
    position: absolute; top: 0; left: 0;
    font-family: var(--mono); font-size: .75rem; font-weight: 700;
    color: var(--accento); letter-spacing: .1em;
  }
  .tappa::after {
    content: ''; position: absolute; top: .55rem; left: 1.4rem; right: 0; height: 1px;
    background: var(--linea);
  }
  .tappa > * + * { margin-top: var(--s2); }

  /* --- Stampa ---------------------------------------------------------------- */

  /* La foto del Mini-PC.

     25rem, cioe' i 400 px della foto: la scatoletta e' un dettaglio della
     sezione, non il suo soggetto, e a tutta colonna diventava una fascia che
     si mangiava la pagina prima che si fosse letto il perche'.

     Niente riquadro, niente sfondo, niente ombra: il PNG e' scontornato e
     l'oggetto sta appoggiato sul crema della pagina. C'e' stato un riquadro
     chiaro finche' lo scatto aveva il fondo bianco, e serviva solo a
     nascondere quel rettangolo — se un domani si rimette una foto con lo
     sfondo pieno, il rettangolo torna a vedersi e il riquadro va rimesso. */
  .minipc { max-width: 25rem; }
  .minipc img { width: 100%; height: auto; }
  .minipc__dida {
    margin-top: var(--s3);
    font-size: .8125rem; color: var(--testo-3);
    max-width: var(--misura);
  }
  /* La didascalia e' grigia, come tutte le didascalie. Ma il pezzo
     evidenziato no: grigio chiaro sopra l'ambra e' due colori slavati uno
     sull'altro, e l'evidenziatore serve a farsi leggere. Dentro `mark` il
     testo torna nero pieno. */
  .minipc__dida mark { color: var(--testo); }

  .collegamenti { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .collegamento { position: relative; }
  .collegamento--top { border-color: color-mix(in srgb, var(--arancio) 45%, transparent); }
  .collegamento__stella {
    position: absolute; top: var(--s4); right: var(--s4);
    font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--arancio-su); background: var(--arancio);
    padding: .2rem .55rem; border-radius: var(--pillola);
  }

  .regola {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
    font-family: var(--mono); font-size: .8125rem;
    padding: var(--s4); border-radius: var(--r2);
    background: var(--superficie); border: 1px dashed var(--linea);
    overflow-x: auto;
  }
  .regola span { white-space: nowrap; }
  .regola i { font-style: normal; color: var(--accento); }

  /* --- Lingue e valute -------------------------------------------------------- */

  .lingue__scelta { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .lingue__scelta a {
    text-decoration: none; padding: var(--s3) var(--s5);
    border-radius: var(--pillola); border: 1.5px solid var(--linea);
    font-weight: 700; font-size: .9375rem;
    transition: border-color .15s ease, background-color .15s ease;
  }
  .lingue__scelta a:hover { border-color: var(--accento); }
  .lingue__scelta a[aria-current="true"] {
    background: var(--arancio); border-color: transparent; color: var(--arancio-su);
  }

  .valute { display: grid; gap: 0; border: 1px solid var(--linea); border-radius: var(--r2); overflow: hidden; }
  .valuta {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
    padding: var(--s3) var(--s4);
    background: var(--superficie);
  }
  .valuta + .valuta { border-top: 1px solid var(--linea); }
  .valuta__cod { font-family: var(--mono); font-size: .75rem; font-weight: 700; color: var(--testo-3); letter-spacing: .06em; }
  .valuta__v   { font-family: var(--mono); font-size: 1.0625rem; font-weight: 600; }

  /* Le cinquantasette per intero: in riga stanno solo se si accorciano a
     codice + simbolo, e chiuse dentro un details finche' non servono. */
  .tutte { border: 1px solid var(--linea); border-radius: var(--r2); background: var(--superficie); }
  .tutte > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    padding: var(--s4) var(--s5); font-weight: 700; font-size: .9375rem;
  }
  .tutte > summary::-webkit-details-marker { display: none; }
  .tutte > summary::after {
    content: '+'; font-family: var(--mono); font-size: 1.25rem; line-height: 1; color: var(--accento);
  }
  .tutte[open] > summary::after { content: '\2013'; }
  .tutte > summary:hover { color: var(--accento); }
  .tutte__corpo { padding: 0 var(--s5) var(--s5); }
  .tutte__area + .tutte__area { margin-top: var(--s5); }
  .tutte__area__t {
    display: flex; align-items: center; gap: var(--s2);
    margin: 0 0 var(--s3); font-size: .6875rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em; color: var(--testo-3);
  }
  .tutte__area__n {
    font-family: var(--mono); font-size: .6875rem; font-weight: 700; letter-spacing: 0;
    padding: .1em .5em; border-radius: var(--pillola); background: var(--linea);
  }
  .vchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
  .vchip {
    display: inline-flex; align-items: baseline; gap: .45em;
    padding: .3em .6em; border: 1px solid var(--linea); border-radius: var(--r1);
    font-family: var(--mono); font-size: .8125rem; line-height: 1.4;
  }
  /* Le sette che valgono in piu' di un paese: si distinguono dal bordo, non
     dal colore da solo — chi non vede il verde deve comunque accorgersene. */
  .vchip--multi { border-color: var(--accento); border-style: dashed; }
  .vchip__cod { font-weight: 700; letter-spacing: .04em; }
  .vchip__sim { color: var(--testo-3); }
  .tutte__nota { margin-top: var(--s5); }

  /* --- Funzionalita' ---------------------------------------------------------- */

  .gruppo { border: 1px solid var(--linea); border-radius: var(--r3); background: var(--superficie); overflow: hidden; }
  .gruppo + .gruppo { margin-top: var(--s3); }
  .gruppo > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
    padding: var(--s5); font-weight: 800; font-size: 1.0625rem;
  }
  .gruppo > summary::-webkit-details-marker { display: none; }
  .gruppo__meta { display: flex; align-items: center; gap: var(--s3); color: var(--testo-3); font-size: .8125rem; }
  .gruppo__giu { transition: transform .2s ease; flex: none; }
  .gruppo[open] .gruppo__giu { transform: rotate(180deg); }
  .gruppo__c { padding: 0 var(--s5) var(--s5); }
  .gruppo__c ul {
    display: grid; gap: var(--s2) var(--s5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }
  .gruppo__c li {
    display: grid; grid-template-columns: 16px 1fr; gap: var(--s3);
    align-items: start; font-size: .9375rem; color: var(--testo-2);
    padding-block: var(--s1);
  }
  .gruppo__c li::before {
    content: ''; margin-top: .55em; width: 6px; height: 6px; border-radius: 50%;
    background: var(--arancio); margin-left: 5px;
  }

  /* --- Prezzi ------------------------------------------------------------------ */

  .prova {
    border: 2px solid var(--verde);
    background: linear-gradient(180deg, color-mix(in srgb, var(--verde) 8%, var(--superficie)), var(--superficie));
  }
  .prova__g {
    font-family: var(--mono); font-weight: 700;
    font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
    letter-spacing: -.04em; color: var(--verde-testo); line-height: 1;
  }

  .piani { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .piano { text-align: center; position: relative; }
  .piano--top { border-color: var(--ink); box-shadow: var(--ombra-2); }
  .piano__nome { font-weight: 800; font-size: 1rem; }
  .piano__p { font-family: var(--mono); font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
  .piano__d { font-size: .8125rem; color: var(--testo-3); }
  /* «Mini-PC Stampa compreso»: sta su un piano solo, e va vista prima di
     leggerla. L'evidenziatore e' quello di `mark` — l'ambra del marchio, non
     il giallo del browser, che su questo fondo stona. */
  .piano__incluso { font-size: .8125rem; font-weight: 700; line-height: 1.5; }
  .piano__top {
    position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: #fff;
    font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: .25rem .75rem; border-radius: var(--pillola); white-space: nowrap;
  }

  /* --- FAQ ---------------------------------------------------------------------- */

  .faq { border-top: 1px solid var(--linea); }
  .faq > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5);
    padding: var(--s5) 0; font-weight: 700; font-size: 1.0625rem;
  }
  .faq > summary::-webkit-details-marker { display: none; }
  .faq__piu { flex: none; margin-top: .2rem; transition: transform .2s ease; }
  .faq[open] .faq__piu { transform: rotate(45deg); }
  .faq__r { padding-bottom: var(--s5); color: var(--testo-2); max-width: var(--misura); }

  /* --- Modulo --------------------------------------------------------------------- */

  .modulo { display: grid; gap: var(--s4); }
  .campi { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .campo { display: grid; gap: var(--s2); }
  .campo--pieno { grid-column: 1 / -1; }

  .campo label { font-size: .875rem; font-weight: 700; }
  .campo__opz { font-weight: 500; color: var(--testo-3); }

  .campo input, .campo select, .campo textarea {
    width: 100%; min-height: 48px; padding: var(--s3) var(--s4);
    background: var(--superficie); color: var(--testo);
    border: 1.5px solid var(--linea); border-radius: var(--r2);
    /* Sotto i 16px iOS ingrandisce la pagina al primo tocco su un campo,
       e da li' in poi la pagina resta storta. */
    font-size: 1rem;
    transition: border-color .15s ease;
  }
  .campo textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
  .campo select { appearance: none; padding-right: var(--s7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C736B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right var(--s4) center; background-size: 16px;
  }
  .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--verde); }
  .campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--rosso); }

  .campo__err { font-size: .8125rem; color: var(--rosso); font-weight: 600; display: none; }
  .campo__err:not(:empty) { display: flex; align-items: center; gap: var(--s2); }

  .consenso { display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); align-items: start; }
  .consenso input { width: 22px; height: 22px; min-height: 0; margin-top: .15em; accent-color: var(--verde); }
  .consenso span { font-size: .875rem; color: var(--testo-2); }
  .consenso a { color: var(--verde-testo); text-underline-offset: 2px; }

  /* Il campo esca. Non `display:none`: alcuni robot lo riconoscono e lo
     saltano. Cosi' resta nel documento ma fuori dallo schermo, e chi usa un
     lettore di schermo trova l'etichetta che gli dice di lasciarlo vuoto. */
  .esca {
    position: absolute !important; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
  }

  .esito {
    padding: var(--s4) var(--s5); border-radius: var(--r2);
    border: 1.5px solid var(--linea); background: var(--superficie);
    display: none;
  }
  .esito[data-stato] { display: block; }
  .esito[data-stato="ok"] { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 8%, var(--superficie)); }
  .esito[data-stato="err"] { border-color: var(--rosso); background: color-mix(in srgb, var(--rosso) 6%, var(--superficie)); }
  .esito__t { font-weight: 800; }
  .esito__d { font-size: .9375rem; color: var(--testo-2); margin-top: var(--s1); }

  /* --- Piè di pagina ---------------------------------------------------------------- */

  .piede {
    background: var(--scuro); color: var(--su-scuro-2);
    padding-block: var(--s8) var(--s6);
    padding-bottom: max(var(--s6), env(safe-area-inset-bottom));
  }
  .piede a { color: var(--su-scuro-2); text-decoration: none; }
  .piede a:hover { color: #fff; }
  .piede__griglia {
    display: grid; gap: var(--s6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }
  .piede__marchio img { height: 34px; width: auto; }
  .piede__claim { font-size: .875rem; margin-top: var(--s3); max-width: 20rem; }
  /* Le icone di Instagram e Facebook. 44 px di lato: si toccano col
     pollice, e sotto quella misura su un telefono si sbaglia. Il colore lo
     prendono dal link (`currentColor`), quindi il passaggio al bianco lo fa
     gia' `.piede a:hover`; il bordo lo segue. */
  .piede__social { display: flex; gap: var(--s3); margin-top: var(--s5); }
  .piede__social a {
    display: grid; place-items: center; flex: none;
    width: 44px; height: 44px;
    border: 1px solid var(--scuro-bordo); border-radius: var(--pillola);
    transition: color .15s ease, border-color .15s ease;
  }
  .piede__social a:hover { border-color: currentColor; }
  .piede h3 { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: var(--s3); }
  .piede li a {
    font-size: .9rem;
    /* Su un telefono un link alto 19 px si sbaglia: si allarga la zona
       toccabile senza allargare il testo. Il blocco resta compatto perche'
       il padding sostituisce il margine fra le voci. */
    display: inline-block; padding-block: var(--s3);
  }
  .piede__fondo {
    margin-top: var(--s7); padding-top: var(--s5);
    border-top: 1px solid var(--scuro-bordo);
    display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6);
    justify-content: space-between; font-size: .8125rem;
  }
  .piede__fondo p { max-width: 34rem; }
}

/* ==========================================================================
   Bottoni degli store

   Non sono i badge ufficiali di Apple e Google ma la stessa forma, rifatta
   con i colori del sito: due righe, la piccola sopra e il nome dello store
   sotto. Vivono dentro la scheda dell'App Cliente, quindi su fondo chiaro e
   su fondo scuro — i colori arrivano dalle variabili della sezione.
   ========================================================================== */

@layer componenti {

  .store { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

  .store__b {
    display: inline-flex; align-items: center; gap: var(--s3);
    min-height: 52px; padding: var(--s2) var(--s5);
    border: 1px solid var(--linea); border-radius: var(--r2);
    background: var(--superficie); color: var(--testo);
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
  }
  .store__b:hover { border-color: var(--accento); transform: translateY(-1px); }

  .store__i { flex: none; }

  /* Le due righe non devono ballare: interlinea fissa, non ereditata. */
  .store__t { display: grid; gap: 1px; text-align: left; }
  .store__p { font-size: .6875rem; line-height: 1.2; color: var(--testo-2); }
  .store__n { font-size: 1rem; line-height: 1.2; font-weight: 600; }
}

/* ==========================================================================
   Video guida

   L'anteprima e' una nostra immagine dentro un link, non un iframe: il
   lettore di YouTube compare solo dopo il clic, e prende il posto esatto
   dell'anteprima. Le due cose hanno percio' la stessa forma — stesso rapporto
   16/9 e stesso raggio — altrimenti al clic la griglia salterebbe.
   ========================================================================== */

@layer sezioni {

  .video-griglia {
    display: grid; gap: var(--s6) var(--s5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }
  .video > * + * { margin-top: var(--s2); }

  .video__tela, .video__quadro {
    display: block; width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--r3);
  }

  .video__tela {
    position: relative; overflow: hidden;
    border: 1px solid var(--linea);
    background: var(--superficie);
    cursor: pointer;
  }
  .video__tela img { width: 100%; height: 100%; object-fit: cover; }

  /* Finche' l'anteprima non e' stata girata, il riquadro non resta vuoto. */
  .video__tela--vuota {
    background:
      radial-gradient(120% 130% at 15% 0%, color-mix(in srgb, var(--arancio) 26%, transparent), transparent 62%),
      var(--superficie);
  }

  .video__tondo {
    position: absolute; inset: 0; margin: auto;
    width: 66px; height: 66px; border-radius: 50%;
    display: grid; place-items: center;
    /* Il triangolo pieno pesa a sinistra: senza questo sembra scentrato. */
    padding-left: 4px;
    background: var(--verde); color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
    transition: transform .2s ease, background .2s ease;
  }
  .video__tela:hover .video__tondo,
  .video__tela:focus-visible .video__tondo { transform: scale(1.07); background: var(--verde-scuro); }

  .video__durata {
    position: absolute; right: var(--s3); bottom: var(--s3);
    font-family: var(--mono); font-size: .75rem; line-height: 1;
    padding: .35em .5em; border-radius: var(--r1);
    background: rgba(0,0,0,.74); color: #fff;
  }

  .video__quadro { border: 0; background: #000; }

  .video__lingua { display: flex; gap: var(--s2); align-items: baseline; }

  /* I passi per cambiare traccia audio: numerati, corti, dentro una scheda. */
  .video-passi { counter-reset: vp; display: grid; gap: var(--s3); }
  .video-passi li {
    counter-increment: vp;
    display: grid; grid-template-columns: 26px 1fr; gap: var(--s3);
    align-items: baseline;
    font-size: .9375rem; color: var(--testo-2);
  }
  .video-passi li::before {
    content: counter(vp) '.';
    font-family: var(--mono); font-size: .8125rem; color: var(--accento);
  }
}

/* ==========================================================================
   Pagine legali
   Testo lungo da leggere, non da scorrere: misura stretta e gerarchia chiara.
   ========================================================================== */

@layer sezioni {
  .legale { max-width: var(--misura); color: var(--testo-2); }
  .legale h2 {
    font-size: 1.125rem; color: var(--testo);
    margin-top: var(--s7); margin-bottom: var(--s3);
    padding-top: var(--s4); border-top: 1px solid var(--linea);
  }
  .legale h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
  .legale p + p, .legale ul + p, .legale p + ul { margin-top: var(--s4); }
  .legale ul { margin-top: var(--s3); display: grid; gap: var(--s2); }
  /* Rientro e pallino, NON una griglia.
     Prima era `display:grid` con due colonne (16px e 1fr): finche' la voce e'
     solo testo funziona, perche' i figli sono due — il ::before e il testo.
     Ma se la voce comincia con un elemento in linea (<code>, <strong>) i figli
     diventano tre: il terzo scivola nella seconda riga, PRIMA colonna, larga
     16px, e il testo va a capo a ogni parola. Succedeva sulla privacy, sui due
     nomi dei cookie e sulle basi giuridiche. Col rientro e il pallino in
     assoluto la voce resta un blocco solo e il contenuto non conta piu'. */
  .legale li { position: relative; padding-left: 28px; }
  .legale li::before {
    content: ''; position: absolute; left: 5px; top: .55em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--arancio);
  }
  .legale code {
    font-family: var(--mono); font-size: .875em;
    background: var(--chip); padding: .1em .35em; border-radius: var(--r1);
  }
  .legale strong { color: var(--testo); }
  .legale em { font-style: italic; }
}

/* ==========================================================================
   Utility
   ========================================================================== */

@layer utility {
  .solo-lettore {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .centro   { text-align: center; }
  .mt-0 { margin-top: 0 !important; }
  .mt-5 { margin-top: var(--s5) !important; }
  .mt-6 { margin-top: var(--s6) !important; }
  .mt-7 { margin-top: var(--s7) !important; }
  .scorri-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   Stampa della pagina
   Capita che venga stampata e lasciata sul tavolo di una pizzeria: si tengono
   i contenuti, si buttano navigazione, schermate e bottoni.
   ========================================================================== */

@media print {
  .nav, .salta, .piede__fondo, .piede__social, .btn, .app__tab, .cornice, .modulo { display: none !important; }
  .sez { padding-block: 1.2cm; content-visibility: visible; }
  .sez--scura, #hero, .piede { background: #fff !important; color: #000 !important; }
  .gruppo[open] .gruppo__c, .faq .faq__r { display: block !important; }
  .gruppo, .faq { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}