:root {
  --rosso: #D63A36;            
  --rosso-premuto: #C8332F;    
  --rosso-scuro: #7C2621;      
  --rosa: #FDECEB;
  --rosa-premuta: #FAD9D7;
  --nero: #161616;
  --bianco: #FFFFFF;

  --mattone: #7C2621;          
  --mattone-chiaro: #993A33;   
  --su-mattone: #EECFCB;       

  --sfondo: var(--bianco);
  --sfondo-2: #F5F5F6;
  --testo: var(--nero);
  --testo-2: #55555B;
  --linea: #E7E7EA;
  --linea-forte: #D4D4D8;
  --tratteggio: #C9C9CF;
  --bordo-campo: #75757C;
  --scuro: #141414;
  --su-scuro: #D4D4D8;
  --su-scuro-2: #A1A1AA;
  --linea-su-scuro: rgba(255, 255, 255, 0.16);   
  --su-scuro-hover: rgba(255, 255, 255, 0.08);   
  --spento-su-scuro: rgba(255, 255, 255, 0.4);   
  --bordo-campo-su-scuro: rgba(255, 255, 255, 0.45);   

  --stella: #F4B400;
  --giallo: #FFCC41;           
  --stella-vuota: #E4E4E7;
  --aperto: #16A34A;


  --font-titoli: "Outfit", "Outfit ripiego", system-ui, sans-serif;
  --font-testo: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Atkinson ripiego", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", "Atkinson Mono ripiego", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --misura-display: clamp(2.4rem, 3vw + 1.2rem, 3.75rem);
  --misura-headline: clamp(2rem, 2.2vw + 1.25rem, 3.25rem);
  --misura-title: 1.25rem;
  --misura-cifra: 3.25rem;
  --misura-titolo-riquadro: clamp(1.75rem, 1.2vw + 1.4rem, 2.5rem);
  --misura-lead: clamp(1.1875rem, 0.8vw + 1rem, 1.4375rem);
  --misura-label: 0.9375rem;
  --misura-dati: 0.9375rem;

  --raggio-s: 12px;
  --raggio-campo: 14px;
  --raggio-icona: 16px;
  --raggio-m: 18px;
  --raggio-l: 28px;
  --raggio-pillola: 999px;

  --gutter: clamp(16px, 4vw, 40px);
  --spazio-sezione: clamp(64px, 8vw, 112px);
  --spazio-griglia: 16px;      
  --contenitore: 1200px;
  --altezza-barra: 76px;
  --spazio-riquadro: clamp(24px, 4vw, 56px);

  --colonne: 4;
  --blocco-1: 1 / -1;
  --blocco-2: 1 / -1;

  --ombra-appoggio: 0 1px 2px rgba(20, 20, 20, 0.05), 0 6px 16px rgba(20, 20, 20, 0.06);
  --ombra-sollevato: 0 18px 40px -12px rgba(20, 20, 20, 0.22);
  --ombra-carta: drop-shadow(0 18px 24px rgba(20, 20, 20, 0.12)) drop-shadow(0 2px 2px rgba(20, 20, 20, 0.08));

  --durata-breve: 0.18s;
  --durata-stampa: 1.6s;
  --durata-entrata: 0.8s;      
  --passo-entrata: 90ms;       
  --durata-galleggio: 6s;      
  --durata-rivela: 0.7s;       
}

@media (min-width: 760px) { :root { --spazio-griglia: 20px; --colonne: 8; } }
@media (min-width: 960px) { :root { --blocco-1: 1 / 5; --blocco-2: 5 / -1; } }
@media (min-width: 1100px) { :root { --colonne: 12; --blocco-1: 1 / 7; --blocco-2: 8 / -1; } }