/* ==================================================================
   Aggiunte successive al foglio principale.
   Perché un secondo file: il canale FTP rifiuta scritture oltre ~14,4 KB,
   quindi style.css resta congelato e le modifiche vivono qui.
   ================================================================== */

/* ------------------------------------------------------------------
   IMPIANTO CROMATICO — il colore diventa inchiostro.
   Prima: nero su grigio chiaro, giallo solo come riempimento.
   Adesso: come fa burrostudio, il colore È il testo, la carta è un
   bianco caldissimo, e le fasce piene invertono i due.
   Il mattone viene dalla palette di Dispensa Vintage: il loro corallo
   campionato è #DD4C40, che come inchiostro sta a 3,81 e non regge il
   testo corrente. Scurito a #B93A28 arriva a 5,20 tenendo il carattere.
   ------------------------------------------------------------------ */
:root{
  /* #D7280F, non #C8412F: piu' acceso a parita' di regola.
     Il margine non stava nella luminosita' ma nella SATURAZIONE — togliendo
     verde e blu si sale di luminosita' senza perdere contrasto. Da 76% a 93%
     di saturazione, tonalita' quasi identica (8 gradi invece di 7).
     Contrasti misurati sulla carta #FAF4EE: inchiostro 4,58 (era 4,52),
     carta sul mattone 4,58, S bianca sul mattone 5,00. Tutti in regola.
     ⚠️ Soglia da non scendere: 4,5. Piu' acceso di cosi' non si puo' senza
     rompere il testo piccolo (#DD4C40 sta a 3,71, #E04A34 a 3,70). */
  --c1:#D7280F;                    /* inchiostro: mattone acceso */
  --c2:#FAF4EE;                    /* carta: bianco caldo, appena avorio */
  --c3:#FAF4EE;                    /* testo sopra le fasce piene */
  --c1-soft:rgba(215,40,15,.78);
}

html{background:var(--c1)}         /* l'overscroll mostra il colore */
::selection{background:var(--c1);color:var(--c2)}

/* l'evidenziatore: riempimento del colore, testo che vira alla carta */
.mark::before{background:var(--c1)}
.mark.lit>span{color:var(--c2)}

/* i collegamenti si accendono del colore, non del giallo */
a:hover{background:var(--c1);color:var(--c2)}
.cta:hover{background:var(--c1);color:var(--c2)}
.copy:hover{background:var(--c1);color:var(--c2)}

.mk{background:var(--c1)}

/* ------------------------------------------------------------------
   IL MARCHIO — tre barre ascendenti i cui vertici appoggiano su un'unica
   retta che sale: la crescita detta come pendio, non come istogramma.
   Scartate: le barre a vertice piatto (il marchio più generico che esista),
   quelle col taglio singolo (a 20px il taglio spariva), i gradini (a 20px
   diventano una macchia) e la versione barre+cuneo (terzo elemento troppo
   sottile). Prima di questo: un triangolo col morso, abbandonato.
   Maschera SVG e non clip-path, così la forma scala fra i 15px del menu
   e i 78 del footer e segue il colore dell'inchiostro da sé.
   ------------------------------------------------------------------ */
.mk{
  clip-path:none;
  aspect-ratio:1/1;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3Cpath%20fill='%23000'%20d='M0%2074.4L28%2057.0L28%20120L0%20120ZM46%2045.9L74%2028.5L74%20120L46%20120ZM92%2017.4L120%200.0L120%20120L92%20120Z'/%3E%3C/svg%3E");   mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3Cpath%20fill='%23000'%20d='M0%2074.4L28%2057.0L28%20120L0%20120ZM46%2045.9L74%2028.5L74%20120L46%20120ZM92%2017.4L120%200.0L120%20120L92%20120Z'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;         mask-size:contain;
  -webkit-mask-repeat:no-repeat;     mask-repeat:no-repeat;
  -webkit-mask-position:center;      mask-position:center;
}
.logo .mk,.bigmark{aspect-ratio:1/1}

/* ---------- la fascia piena: colore sotto, carta sopra ---------- */
.full-yellow{background:var(--c1);color:var(--c2)}
.full-yellow .mk{background:var(--c2)}
.full-yellow .mark::before{background:var(--c2)}
.full-yellow .mark.lit>span{color:var(--c1)}
.full-yellow ::selection{background:var(--c2);color:var(--c1)}
.full-yellow a:hover{background:var(--c2);color:var(--c1)}

/* il nav quando ci passa sopra */
#nav.on-yellow{color:var(--c2)}
#nav.on-yellow .mk{background:var(--c2)}
#nav.on-yellow a:hover,#nav.on-yellow .cta:hover{background:var(--c2);color:var(--c1)}

/* ---------- i loghi prendono il colore dell'inchiostro ----------
   Uso il PNG nero come MASCHERA e ci metto il colore sotto: la tinta è
   esatta a qualunque colore futuro e non serve riesportare gli otto file
   (che peserebbero troppo per il canale FTP).
   Dentro @supports perché senza maschera si vedrebbe un rettangolo pieno:
   in quel caso resta il filtro che li rende neri, come prima. */
.clienti img{filter:brightness(0) saturate(0)}

@supports ((mask-image: url("i.png")) or (-webkit-mask-image: url("i.png"))) {
  .clienti .cliente{
    display:block;
    background:var(--c1);
    -webkit-mask-image:var(--logo);          mask-image:var(--logo);
    -webkit-mask-repeat:no-repeat;           mask-repeat:no-repeat;
    -webkit-mask-position:center;            mask-position:center;
    -webkit-mask-size:contain;               mask-size:contain;
    -webkit-mask-origin:content-box;         mask-origin:content-box;
    -webkit-mask-clip:content-box;           mask-clip:content-box;
  }
  .clienti img{visibility:hidden}
}

/* ---------- il footer diventa un blocco pieno, come da loro ---------- */
#footer{background:var(--c1);color:var(--c2)}
#footer .mk{background:var(--c2)}
/* Il marchio grande in cima al footer è stato rimosso: portava con sé
   ~110px di ingombro (l'icona più il suo margine inferiore). Alzo
   l'imbottitura da 6 a 8, così la mail non parte attaccata al bordo
   della fascia — ma senza recuperare tutto lo spazio di un elemento
   che non c'è più. Per tornare indietro: rimetti 6. */
#footer .container{padding-top:calc(var(--base-mg) * 8);
                   padding-bottom:calc(var(--base-mg) * 2)}
#footer a:hover{background:var(--c2);color:var(--c1)}
#footer .cta{border-color:currentColor}
#footer .cta:hover{background:var(--c2);color:var(--c1)}
#footer .copy:hover{background:var(--c2);color:var(--c1)}
#footer ::selection{background:var(--c2);color:var(--c1)}

/* la riga legale vive dentro il blocco: piccola, senza barra propria */
#footer-legal{
  background:transparent;
  color:var(--c2);
  margin-inline:0;
  padding:0;
  opacity:.85;
  border-top:1px solid currentColor;
  padding-top:calc(var(--base-mg) * 1.5);
  margin-top:calc(var(--base-mg) * 3);
}
#footer-legal a{color:var(--c2)}
#footer-legal a:hover{background:var(--c2);color:var(--c1)}
#footer-legal ::selection{background:var(--c2);color:var(--c1)}

/* le colonne del footer perdono il filetto scuro, che sul colore stona */
.footer-cols{border-top-color:currentColor}

/* ------------------------------------------------------------------
   Al passaggio del mouse il collegamento si riempie del colore, e il
   marchio — che è dello stesso colore — svaniva dentro il riempimento.
   Deve invertire come fa il testo accanto.
   ------------------------------------------------------------------ */
a:hover .mk{background:var(--c2)}
#nav.on-yellow a:hover .mk,
.full-yellow a:hover .mk,
#footer a:hover .mk{background:var(--c1)}

/* "Prenota una call" e' piu' larga di "Prenota call": sotto i 380px
   logo e azione non stavano piu' sulla stessa riga. Un gradino in meno. */
@media (max-width:380px){
  .logo{font-size:1.15rem}
  #nav ul a{font-size:1.05rem}
  #nav .cta{padding:calc(var(--base-mg) * .5) calc(var(--base-mg) * .95)}
}

/* Respiro delle sezioni sotto il banner.
   Il banner ha altezza minima 100vh e 64vh, quindi l'aria gli arriva
   dall'altezza; "Cosa faccio", "Con chi ho lavorato" e "Chi sono" hanno
   solo l'imbottitura, ed erano ferme a 4 volte --base-mg. Alzato di un
   gradino, senza toccare il ritmo del banner. */
#cosa-faccio .container,
#clienti .container,
#chi-sono .container{
  /* Sopra 6, sotto 4. Le imbottiture di due sezioni adiacenti si
     SOMMANO: con 6 e 6 il salto fra una sezione e l'altra era di 12
     unità, mentre sopra la banda ne ha 4 sotto e il salto è di 10.
     Con 4 tutti i salti valgono 10 e la pagina respira allo stesso
     modo dall'inizio alla fine. Lo spazio DENTRO la sezione, sopra
     il titolo, resta 6 e non cambia. */
  padding-block:calc(var(--base-mg) * 6) calc(var(--base-mg) * 4);
}

/* fra il titolo di sezione e il suo contenuto */
.sez-h{margin-bottom:calc(var(--base-mg) * 4)}

/* le voci dei servizi: erano il punto più stretto della pagina */
.voce{padding-block:calc(var(--base-mg) * 2.6);
      gap:calc(var(--base-mg) * .75) calc(var(--base-mg) * 3)}
/* impilate su una colonna il titolo cadeva addosso al paragrafo */
@media (max-width:820px){
  .voce{gap:calc(var(--base-mg) * 1.25) calc(var(--base-mg) * 3)}
}

.settori{margin-top:calc(var(--base-mg) * 3.5)}
.clienti{padding-top:calc(var(--base-mg) * 5);
         gap:calc(var(--base-mg) * 5) calc(var(--base-mg) * 2.5)}
#chi-sono .fs-2 + .fs-2{margin-top:calc(var(--base-mg) * 2)}

/* Il logotipo resta solo scritta: l'icona è uscita dalla barra.
   800 è il peso massimo che il file Archivo che ospitiamo contiene
   (font-weight:400 800): oltre, il browser lo simulerebbe ingrassando
   i contorni, e si vede. Tutto il resto del sito sta a 600. */
/* Logotipo: Archivo al peso massimo.
   Provata e SCARTATA il 04/09 la Titan One (grassetto tondo): reggeva la
   misura della barra, ma non convinceva. La S tonda resta nell'icona, dove
   la personalita' non costa leggibilita' — una lettera sola, e grande.
   Il file Archivo contiene wght 100-900 mentre il nostro @font-face ne
   dichiara 400-800: font-weight si ferma a 800, font-variation-settings
   pilota l'asse e scavalca il limite. Se un browser non lo supporta resta
   800: si degrada, non si rompe. */
.logo{font-weight:800;font-variation-settings:'wght' 900}

/* Puntatore: triangolo pieno. Prima era lo stesso triangolo con una
   tacca ritagliata sul lato inferiore. Il punto di presa passa dal
   centro alla punta, come in qualunque freccia. */
:root{
  --cursore:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 2 L22 21 L2 21 Z' fill='%230B0B0B'/%3E%3C/svg%3E") 12 2, pointer;
}

/* ------------------------------------------------------------------
   PESI — titoli e voci di un gradino piu' pesanti (600 → 700).
   Il file Archivo dichiara 400-800, quindi 700 e' un peso vero e non
   una simulazione del browser. I paragrafi restano a 600: alzarli
   avrebbe appesantito i blocchi di testo, non i titoli.
   L'indirizzo email del footer e' incluso perche' e' l'elemento piu'
   grande della pagina: lasciandolo a 600 sarebbe stato l'unico
   elemento da display piu' leggero di tutti gli altri.
   ------------------------------------------------------------------ */
h1,h2,h3{font-weight:700}
#nav ul a{font-weight:700}
.cta{font-weight:700}
#footer-email > a{font-weight:700}

/* ------------------------------------------------------------------
   ESPERIENZE — sostituisce la parete dei loghi.
   Impilata e stretta, non a due colonne come "Cosa faccio": i ruoli
   sono di due o tre parole e una griglia lascerebbe mezza riga vuota.
   Filetti come nel resto della pagina, così la sezione appartiene allo
   stesso impianto invece di sembrare un pezzo riportato.
   ------------------------------------------------------------------ */
.esperienze{
  list-style:none;
  /* Niente margine sotto: sommandosi alle imbottiture portava il salto
     verso "Chi sono" a 14 unità contro le 10 delle altre. Era un residuo
     di quando qui c'era la parete dei loghi. */
}
/* Niente filetti fra un'azienda e l'altra: a separare basta il vuoto.
   Con i filetti la sezione somigliava troppo a "Cosa faccio" e i nomi
   sembravano righe di una tabella invece che voci di un elenco. */
.esperienze li + li{
  margin-top:calc(var(--base-mg) * 2.8);
}
.esperienze h3{
  font-size:clamp(1.6rem,2.1vw,2.2rem);
  line-height:1.05;letter-spacing:-.022em;font-weight:700;
}
.esperienze p{
  font-size:clamp(.95rem,1.15vw,1.15rem);
  line-height:1.4;font-weight:600;
  color:var(--c1-soft);
  margin-top:calc(var(--base-mg) * .35);
  max-width:52ch;
}

/* ------------------------------------------------------------------
   BANNER DEL CONSENSO.
   Scritto in casa e non con una piattaforma di terze parti: quelle
   caricano loro stesse script da domini esterni, cioe' proprio la cosa
   che il consenso dovrebbe governare. Cosi' l'unica chiamata fuori
   dominio resta Analytics, e solo dopo un sì esplicito.
   I due bottoni hanno lo STESSO peso visivo: rifiutare dev'essere
   facile quanto accettare, e un "rifiuta" in grigetto non lo e'.
   ------------------------------------------------------------------ */
#consenso{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--c1);color:var(--c2);
  padding:calc(var(--base-mg) * 1.6) var(--padding-lr);
  display:none;
}
#consenso.visibile{display:block}
#consenso .dentro{
  max-width:var(--maxw);margin:0 auto;
  display:flex;gap:calc(var(--base-mg) * 1.5);
  align-items:center;justify-content:space-between;flex-wrap:wrap;
}
#consenso p{
  font-size:clamp(.9rem,1.05vw,1.02rem);line-height:1.45;font-weight:600;
  max-width:62ch;margin:0;
}
#consenso a{text-decoration:underline}
#consenso a:hover{background:var(--c2);color:var(--c1)}
#consenso .scelte{display:flex;gap:calc(var(--base-mg) * .8);flex-shrink:0}
#consenso button{
  font:inherit;font-weight:700;cursor:var(--cursore);
  background:none;color:var(--c2);
  border:2px solid var(--c2);
  border-radius:calc(var(--base-mg) * 3);
  padding:calc(var(--base-mg) * .55) calc(var(--base-mg) * 1.4);
  white-space:nowrap;
}
#consenso button:hover{background:var(--c2);color:var(--c1)}
@media (max-width:700px){
  #consenso .dentro{flex-direction:column;align-items:flex-start}
  #consenso .scelte{width:100%}
  #consenso button{flex:1}
}

/* ------------------------------------------------------------------
   ANIMAZIONI — due sole, e nessuna riga di JavaScript in più:
   il motore (IntersectionObserver + classe .in) c'era già.

   1. Le esperienze entrano una dopo l'altra invece che in blocco.
      70 ms fra una e l'altra: sotto i 50 non si percepisce, sopra i
      100 la lista sembra caricarsi lentamente invece che animarsi.
   ------------------------------------------------------------------ */

/* 2. L'indicatore di scorrimento: una goccia che scende lungo la linea.
      Era una barretta ferma, cioè un invito a scendere che non invitava.
      Animato con transform, non con top: il primo non ricalcola il
      layout a ogni fotogramma, il secondo sì. */
.scrollcue{position:relative;overflow:hidden;background:transparent;opacity:1}
.scrollcue::after{
  content:"";position:absolute;top:0;left:0;
  width:100%;height:45%;
  background:var(--c1);opacity:.5;
  animation:goccia 2.6s ease-in-out infinite;
}
@keyframes goccia{
  0%   {transform:translateY(-100%)}
  55%  {transform:translateY(222%)}
  100% {transform:translateY(222%)}
}

/* Chi ha chiesto meno movimento al sistema operativo lo ottiene:
   niente goccia, niente ritardi, tutto fermo e già visibile. */
@media (prefers-reduced-motion:reduce){
  .scrollcue::after{animation:none;transform:none;height:100%}
  .js-anim .esperienze li{transition-delay:0s}
}

/* Le esperienze entrano di lato invece che dal basso.
   26px e non 14 come il resto: in orizzontale uno scarto piccolo non si
   legge come movimento. ⚠️ Serve overflow:hidden sull'elenco, o su
   telefono la voce traslata sporge oltre il bordo e compare la barra di
   scorrimento orizzontale — l'imbottitura laterale è di soli 12px.
   ⚠️ Va riscritta anche la regola .in: questo selettore è più specifico
   di `.js-anim [data-reveal].in`, che altrimenti non riuscirebbe più a
   riportare la voce a posto e resterebbe ferma di lato. */
.esperienze{overflow:hidden}
.js-anim .esperienze li[data-reveal]{transform:translateX(-26px)}
.js-anim .esperienze li[data-reveal].in{transform:none;
  /* 0,42s invece degli 0,8s del resto della pagina: otto righe corte
     non hanno bisogno del tempo di un titolo grande, e sommato allo
     scaglionamento l'ultima voce arrivava oltre un secondo dopo. */
  transition-duration:.42s}
.js-anim .esperienze li:nth-child(2){transition-delay:40ms}
.js-anim .esperienze li:nth-child(3){transition-delay:80ms}
.js-anim .esperienze li:nth-child(4){transition-delay:120ms}
.js-anim .esperienze li:nth-child(5){transition-delay:160ms}
.js-anim .esperienze li:nth-child(6){transition-delay:200ms}
.js-anim .esperienze li:nth-child(7){transition-delay:240ms}
.js-anim .esperienze li:nth-child(8){transition-delay:280ms}

@media (prefers-reduced-motion:reduce){
  .js-anim .esperienze li[data-reveal]{transform:none}
}

/* ------------------------------------------------------------------
   AREE SICURE iOS.
   Sull'iPhone la striscia in fondo è l'area dei gesti: un elemento a
   bottom:0 ci finisce sotto, e i BOTTONI del banner stavano proprio lì.
   env() vale 0 dove non serve, quindi il max() non cambia niente sugli
   altri dispositivi. In orizzontale il notch mangia il lato: la barra
   fissa ne tiene conto per non nascondere il logotipo.
   ------------------------------------------------------------------ */
#consenso{
  padding-bottom:calc(var(--base-mg) * 1.6 + env(safe-area-inset-bottom, 0px));
  padding-left:max(var(--padding-lr), env(safe-area-inset-left, 0px));
  padding-right:max(var(--padding-lr), env(safe-area-inset-right, 0px));
}
#nav{
  padding-left:max(var(--padding-lr), env(safe-area-inset-left, 0px));
  padding-right:max(var(--padding-lr), env(safe-area-inset-right, 0px));
}



/* ------------------------------------------------------------------
   PAGINE INTERNE — la scala tipografica della home.
   Erano su un impianto piu' piccolo: h2 fino a 1,8rem contro i 2,5rem
   dei titoli dei servizi, e testo fino a 1,15rem contro 1,6rem. Su una
   pagina di 800 parole si leggeva bene ma sembrava un altro sito.
   Gli h3 (le domande frequenti) non avevano NESSUNA regola e cadevano
   sul valore di default del browser, piu' piccolo degli h2 e vicino al
   testo corrente: le domande non si distinguevano dalle risposte.
   Interlinea a 1,38 e non 1,32 come in home: qui i paragrafi sono
   lunghi, e a quel corpo l'interlinea stretta della home affatica.
   ------------------------------------------------------------------ */
.pagina h2{
  font-size:clamp(1.8rem,2.4vw,2.5rem);
  line-height:1.03;letter-spacing:-.022em;
}
.pagina h3{
  font-size:clamp(1.2rem,1.7vw,1.5rem);
  line-height:1.15;letter-spacing:-.018em;
  margin:calc(var(--base-mg) * 2.2) 0 calc(var(--base-mg) * .6);
}
.pagina p,.pagina li{
  /* Un gradino sotto la misura della home: qui i paragrafi sono molti e
     al corpo pieno la pagina diventava una parete di testo. */
  font-size:clamp(1.0625rem,1.5vw,1.35rem);
  line-height:1.45;letter-spacing:-.01em;
}
/* L'apertura resta grande: è il paragrafo che regge l'h1 e va letto
   come una dichiarazione, non come testo corrente. */
.pagina h1 + p{
  font-size:clamp(1.0625rem,1.8vw,1.6rem);
  line-height:1.38;
}

/* Filetti come negli elenchi della home: separano le sezioni e le
   domande, e danno alla pagina lo stesso ritmo del resto del sito.
   ⚠️ Il primo h3 segue subito l'h2 "Domande frequenti": senza la regola
   qui sotto ci sarebbero due righe attaccate. */
.pagina h2{
  border-top:1px solid var(--c1);
  padding-top:calc(var(--base-mg) * 2);
}
.pagina h3{
  border-top:1px solid var(--c1);
  padding-top:calc(var(--base-mg) * 1.4);
}
.pagina h2 + h3{border-top:0;padding-top:0}

/* La dissolvenza d'ingresso scende da 1s a 0,35s. Un secondo su un
   titolo grande si legge come misura; sul primo schermo, dove la gente
   sta ancora decidendo se restare, si legge come attesa. */
.js-anim .enter.in{transition:opacity .35s ease}

/* Scorrimento veloce: comparsa istantanea.
   Il JS mette .subito quando l'elemento e' entrato nello schermo prima
   che l'osservatore facesse in tempo. Serve annullare ANCHE il ritardo
   scaglionato, o l'ottava esperienza aspetterebbe comunque 280 ms.
   ⚠️ Il secondo selettore ha la stessa specificita' della regola .in
   delle esperienze: vince perche' viene dopo nel file. */
.js-anim [data-reveal].subito,
.js-anim .esperienze li[data-reveal].subito{
  transition:none;
  transition-delay:0s;
}

/* Comparsa un po' piu' svelta anche nello scorrimento normale: 0,8s era
   la misura di un titolo grande, non di una sezione che scorre. */
.js-anim [data-reveal].in{transition-duration:.5s}

/* ------------------------------------------------------------------
   H1 DELLA HOME — perche' sta in 3 righe.
   La riga critica e' «brand identity e web design per»: i legami
   `brand identity` e `web design` non si spezzano, quindi o ci
   sta intera o cade una quarta riga con la sola parola finale.
   Il contenitore lascia 1178px utili (--maxw 1250 meno 2x --padding-lr).
   Al corpo 5,25rem quella riga ne chiede ~1165: 13px di margine, troppo
   pochi. A 5rem ne chiede ~1110: restano 68px, margine vero.
   ⚠️ NON rimettere il limite in `ch`: e' relativo al corpo, quindi scala
   col testo e il punto di rottura non cambia.
   ⚠️ NON forzare la spezzatura con <br> nascosti da media query:
   `display:none` su un <br> NON lascia uno spazio, quindi da telefono le
   parole si attaccano («marketing,brand identity»). Provato il 15/09.
   ------------------------------------------------------------------ */
#start h1{max-width:100%;font-size:clamp(2.5rem,7vw,5rem)}

/* ------------------------------------------------------------------
   «VEDI ANCHE» in fondo alle pagine interne (13/09/2026).
   Prima ogni landing era un vicolo cieco: linkava solo la home, /call e
   le pagine legali. Stessa grammatica del resto: filetto sopra, niente
   riquadri.
   ------------------------------------------------------------------ */
.affini{
  margin-top:calc(var(--base-mg) * 4);
  padding-top:calc(var(--base-mg) * 1.5);
  border-top:1px solid var(--c1);
}
.affini h2{
  font-size:clamp(1rem,1.2vw,1.15rem);
  border-top:0;padding-top:0;margin:0;
  letter-spacing:.02em;text-transform:uppercase;
}
.affini ul{
  list-style:none;padding:0;
  margin:calc(var(--base-mg) * 1) 0 0;
}
.affini li + li{margin-top:calc(var(--base-mg) * .5)}
.affini a{font-size:clamp(1.0625rem,1.5vw,1.35rem);font-weight:700}

/* ------------------------------------------------------------------
   ACCESSIBILITA' — contrasto dei testi secondari (12/09/2026).
   La palette sta a 4,58 su carta, cioe' appena sopra il minimo AA di 4,5:
   non c'e' margine per "ammorbidire" un testo, qualunque trasparenza
   scende sotto la soglia.
   Prima:  --c1-soft (mattone al 78%) = 3,49  → .settori e .esperienze p
           #footer-legal carta all'85% = 3,64  → la riga con la P.IVA
   Ora i tre testi usano il colore pieno (4,58): la gerarchia la fanno
   corpo e peso, che e' piu' robusto del colore.
   ⚠️ --c1-soft NON va usato per il testo: solo decorazione o testo sopra
   i 24px. Il filetto del footer resta tenue perche' e' decorazione.
   ⚠️ Blocco gia' perso una volta (15/09) troncando il file invece di
   sostituire un pezzo: l'accessibilita' era tornata a 96.
   ------------------------------------------------------------------ */
.settori{color:var(--c1)}
.esperienze p{color:var(--c1)}
#footer-legal{
  opacity:1;
  border-top-color:rgba(250,244,238,.45);
}