/* Minerva Partners – stile del sito
   Colori e caratteri dal manuale del marchio (ottobre 2026).
   Bordeaux e blu notte non vanno nella stessa pagina: in questo sito si usa solo il bordeaux.
   L'oro su fondo chiaro solo per segni (archi, fili, punti), mai per testi.
   Identità (ramo "identita", 4/11/2026): la pagina è un solo foglio. L'apertura bordeaux si scioglie
   nell'avorio con una sfumatura lunga e il piè di pagina torna bordeaux allo stesso modo; tra le parti
   il pennacchio d'oro del logo, che si disegna quando entra nello schermo; numeri romani in Gloock. */

@font-face{font-family:"Gloock";src:url("fonts/Gloock-Regular.woff2") format("woff2"),url("fonts/Gloock-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Regular.woff2") format("woff2"),url("fonts/InstrumentSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Bold.woff2") format("woff2"),url("fonts/InstrumentSans-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bordeaux:#5A1F2B;
  --bordeaux-scuro:#4A1923;     /* solo per lo stato "premuto" dei pulsanti */
  --oro:#B08D57;
  --avorio:#F6F2EA;
  --grafite:#3A3A3A;
  --velo:rgba(90,31,43,.035);   /* velatura appena percettibile (riquadro del modulo) */
  --filo:rgba(90,31,43,.18);    /* linee sottili su fondo chiaro */
  --filo-chiaro:rgba(246,242,234,.22);

  --titoli:"Gloock",Georgia,"Times New Roman",serif;
  --testo:"Instrument Sans",Arial,"Helvetica Neue",sans-serif;

  --m:clamp(16px,5vw,64px);     /* margine laterale */
  --larghezza:1180px;
  --sez:clamp(88px,12vw,168px); /* respiro tra le parti */
  --coda:clamp(220px,42vh,460px); /* lunghezza delle sfumature bordeaux ↔ avorio */
  --barra:64px;

  --s-small:.875rem;
  --s-body:1.0625rem;
  --s-lead:clamp(1.15rem,1rem + .55vw,1.4rem);
  --s-h3:clamp(1.3rem,1.15rem + .5vw,1.55rem);
  --s-h2:clamp(2rem,1.4rem + 2.6vw,3.4rem);
  --s-motto:clamp(1.75rem,1.2rem + 2.4vw,3.1rem);

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
/* il fondo della radice resta avorio: è il colore che il browser mostra nelle zone non ancora disegnate durante
   uno scorrimento veloce (con il bordeaux comparivano strisce scure in fondo allo schermo) */
html{background:var(--avorio)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* le parti raggiunte con "#": la barra fissa non copre il titolo (niente scroll-padding sulla pagina, che si
   sommerebbe). Lo scorrimento morbido c'è solo per i clic dentro la stessa pagina (minerva.js). */
[id]{scroll-margin-top:calc(var(--barra) + env(safe-area-inset-top,0px) + 16px)}
/* parole e numeri da non spezzare (telefoni, email, P.IVA, orari) */
.nb{white-space:nowrap}
body{background:var(--avorio);color:var(--grafite);font-family:var(--testo);font-size:var(--s-body);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--bordeaux);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--titoli);font-weight:400;color:var(--bordeaux);line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
p{text-wrap:pretty}
strong{font-weight:700}
:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px}
.scuro :focus-visible{outline-color:var(--avorio)}

/* testo per i lettori di schermo, nascosto alla vista */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.salta{position:absolute;left:var(--m);top:-60px;z-index:100;background:var(--bordeaux);color:var(--avorio);padding:10px 16px;text-decoration:none}
.salta:focus{top:8px}

.dentro{max-width:var(--larghezza);margin:0 auto;padding:0 var(--m)}

/* ---------- barra in alto ---------- */
.barra{position:sticky;top:0;z-index:50;background:rgba(246,242,234,.97);border-bottom:1px solid var(--filo);padding-top:env(safe-area-inset-top,0px);transition:background-color .5s ease,border-color .5s ease}
.barra .dentro{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--barra)}
.barra .sigillo{position:relative;display:block;width:44px;height:44px;flex:none}
.barra .sigillo img{position:absolute;inset:0;width:44px;height:44px;transition:opacity .5s ease}
.barra .sigillo .su-scuro{opacity:0}
.barra nav ul{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px)}
.barra nav a{font-size:var(--s-small);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--grafite);padding:10px 0;transition:color .5s ease}
.barra nav a:hover{color:var(--bordeaux)}
.barra nav .voce{display:none}
@media (min-width:760px){.barra nav .voce{display:list-item}}
/* sopra l'apertura bordeaux (classe data da minerva.js): barra trasparente, sigillo e voci avorio */
.su-bordeaux .barra{background:rgba(90,31,43,0);border-color:transparent}
.su-bordeaux .barra .sigillo .su-scuro{opacity:1}
.su-bordeaux .barra .sigillo .su-chiaro{opacity:0}
.su-bordeaux .barra nav a{color:rgba(246,242,234,.86)}
.su-bordeaux .barra nav a:hover{color:var(--avorio)}
.su-bordeaux .barra .btn{background:var(--avorio);border-color:var(--avorio);color:var(--bordeaux)!important}

/* ---------- pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:12px 24px;border:1px solid var(--bordeaux);background:var(--bordeaux);color:var(--avorio)!important;font-family:var(--testo);font-size:var(--s-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background-color .3s,color .3s,border-color .3s}
.btn:hover{background:var(--bordeaux-scuro);border-color:var(--bordeaux-scuro)}
.btn.vuoto{background:transparent;color:var(--bordeaux)!important}
.btn.vuoto:hover{background:var(--bordeaux);color:var(--avorio)!important}
.barra .btn{min-height:44px;padding:8px 16px}
.scuro .btn,.apertura .btn{background:var(--avorio);border-color:var(--avorio);color:var(--bordeaux)!important}
.scuro .btn:hover,.apertura .btn:hover{background:transparent;color:var(--avorio)!important}
.scuro .btn.vuoto,.apertura .btn.vuoto{background:transparent;border-color:var(--filo-chiaro);color:var(--avorio)!important}
.scuro .btn.vuoto:hover,.apertura .btn.vuoto:hover{border-color:var(--avorio)}

.scuro{background:var(--bordeaux);color:var(--avorio)}
.scuro h1,.scuro h2,.scuro h3{color:var(--avorio)}
.scuro a:not(.btn){color:var(--avorio)}

/* ---------- apertura: bordeaux che si scioglie nell'avorio ----------
   Sfumatura lunga in CSS (nessun calcolo durante lo scorrimento). I passaggi seguono una curva morbida
   (smoothstep) e il colore si mescola in oklab: niente bande e niente grigio a metà strada.
   Il primo fondo è il ripiego per i browser che non conoscono color-mix(). */
.apertura{position:relative;color:var(--avorio);
  margin-top:calc(-1 * (var(--barra) + env(safe-area-inset-top,0px)));
  padding:calc(var(--barra) + env(safe-area-inset-top,0px) + clamp(40px,7vw,96px)) 0 calc(var(--coda) + clamp(24px,4vw,48px));
  background:linear-gradient(to bottom,var(--bordeaux) 0,var(--bordeaux) calc(100% - var(--coda)),var(--avorio) 100%);
  background:linear-gradient(to bottom,var(--bordeaux) 0,var(--bordeaux) calc(100% - var(--coda)),
    color-mix(in oklab,var(--avorio) 4.3%,var(--bordeaux)) calc(100% - var(--coda) * .875),
    color-mix(in oklab,var(--avorio) 15.6%,var(--bordeaux)) calc(100% - var(--coda) * .75),
    color-mix(in oklab,var(--avorio) 31.6%,var(--bordeaux)) calc(100% - var(--coda) * .625),
    color-mix(in oklab,var(--avorio) 50%,var(--bordeaux)) calc(100% - var(--coda) * .5),
    color-mix(in oklab,var(--avorio) 68.4%,var(--bordeaux)) calc(100% - var(--coda) * .375),
    color-mix(in oklab,var(--avorio) 84.4%,var(--bordeaux)) calc(100% - var(--coda) * .25),
    color-mix(in oklab,var(--avorio) 95.7%,var(--bordeaux)) calc(100% - var(--coda) * .125),
    var(--avorio) 100%)}
.apertura .dentro{display:grid;justify-items:center;align-content:center;text-align:center;gap:clamp(24px,3.4vw,36px);min-height:calc(100svh - var(--barra) - clamp(120px,22vh,220px))}
/* spazio libero attorno al logo: almeno l'altezza della M (circa un terzo dell'altezza del logo) */
.marchio-grande{width:min(100%,560px);padding:clamp(20px,4vw,40px) 0}
.marchio-grande img{width:100%;min-width:160px}
.apertura .settore{font-size:var(--s-small);letter-spacing:.2em;text-transform:uppercase;color:var(--oro);font-weight:700;max-width:28em}
.apertura .azioni{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.fine-bordeaux{position:absolute;left:0;bottom:calc(var(--coda) * .55);width:1px;height:1px;pointer-events:none}

/* ---------- le parti della pagina: un solo foglio avorio ---------- */
.parte{padding:var(--sez) 0 0}
.apertura+.parte{padding-top:0}
main>.parte:last-child{padding-bottom:var(--sez)}
.apri{display:grid;justify-items:center;text-align:center;gap:clamp(16px,2.2vw,22px);margin-bottom:clamp(40px,6vw,72px)}
/* il pennacchio del logo (stessa forma, solo oro), segno tra una parte e l'altra */
.arco{width:clamp(140px,20vw,210px);height:auto;margin-bottom:clamp(8px,1.6vw,16px)}
.arco path{fill:var(--oro)}
.sopra{display:flex;align-items:baseline;justify-content:center;gap:.8em;color:var(--bordeaux)}
.sopra .rom{font-family:var(--titoli);font-size:1.4rem;line-height:1}
.sopra .nome{display:flex;align-items:center;gap:.8em;font-size:var(--s-small);letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--grafite)}
.sopra .nome::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--oro);transform:translateY(-.1em)}
.parte h2{font-size:var(--s-h2);max-width:17em}
.lead{font-size:var(--s-lead);line-height:1.55;max-width:36em}
.centro{text-align:center;margin-left:auto;margin-right:auto}

/* chi siamo: colonna di lettura con capolettera */
.colonna{max-width:38em;margin:0 auto;display:grid;gap:1.1em}
.capolettera::first-letter{font-family:var(--titoli);color:var(--bordeaux);float:left;font-size:3.55em;line-height:.82;padding:.06em .1em 0 0}
@supports (initial-letter:3) or (-webkit-initial-letter:3){
  .capolettera::first-letter{float:none;padding:0 .12em 0 0;font-size:1em;line-height:1;-webkit-initial-letter:3;initial-letter:3}
}
/* le quattro figure professionali: elementi da toccare, ognuno porta alla sua pagina */
.figure{margin-top:clamp(56px,8vw,88px);text-align:center}
.figure-titolo{font-size:var(--s-small);letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:20px}
.figure-elenco{display:grid;max-width:1040px;margin:0 auto;border-top:1px solid var(--filo);text-align:left}
.figure-elenco li{border-bottom:1px solid var(--filo)}
.figura{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:18px 4px;text-decoration:none;color:var(--bordeaux)}
.figura .nome-figura{font-family:var(--titoli);font-size:clamp(1.35rem,1.15rem + .8vw,1.7rem);line-height:1.15}
.figura .cosa{display:inline-flex;align-items:center;gap:.6em;flex:none;font-size:var(--s-small);letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--grafite)}
.figura .freccia,.chi-segue .freccia,.torna .freccia{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--oro);border-radius:50%;color:var(--bordeaux);font-family:var(--testo);font-size:.95rem;letter-spacing:0;transition:transform .4s cubic-bezier(.2,.7,.2,1),background-color .4s ease,color .4s ease}
/* filo d'oro che si stende sotto la figura al passaggio (e con la tastiera) */
.figura::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--oro);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.figura:hover::after,.figura:focus-visible::after{transform:scaleX(1)}
.figura:hover .freccia,.figura:focus-visible .freccia{transform:translateX(4px);background:var(--bordeaux);color:var(--avorio)}
.figura:active .freccia{transform:translateX(2px)}
@media (min-width:900px){
  .figure-elenco{grid-template-columns:repeat(4,minmax(0,1fr));border-top:0;gap:0 clamp(16px,2vw,28px)}
  .figure-elenco.tre{grid-template-columns:repeat(3,minmax(0,1fr))}
  .figure-elenco li{border-bottom:0;border-top:1px solid var(--filo)}
  .figura{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:28px;min-height:100%;padding:26px 0 24px}
  .figura::after{top:-1px;bottom:auto}
}

/* aree di consulenza: un indice, non dei riquadri */
.indice-aree{max-width:1040px;margin:clamp(40px,6vw,64px) auto 0;border-top:1px solid var(--filo)}
.indice-aree li{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:14px;row-gap:10px;padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--filo)}
.indice-aree .rom{grid-row:1 / span 3;font-family:var(--titoli);font-size:1.35rem;line-height:1.5;color:var(--bordeaux);opacity:.6;transition:opacity .4s ease}
.indice-aree h3{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);line-height:1.15;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.indice-aree p{grid-column:2;max-width:34em}
/* la figura che segue l'area: il collegamento copre tutta la riga, che si tocca per intero */
.indice-aree .chi-segue{display:flex;align-items:center;gap:.7em;margin-top:4px;font-size:var(--s-small);letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.chi-segue a{color:var(--bordeaux);text-decoration:none}
.chi-segue a::before{content:"";position:absolute;inset:0;z-index:1}
.chi-segue a:focus-visible{outline:none}
.indice-aree li:has(.chi-segue a:focus-visible){outline:2px solid var(--bordeaux);outline-offset:4px}
.chi-segue .freccia{width:28px;height:28px;font-size:.85rem}
/* filo d'oro che si stende sotto la riga al passaggio del mouse */
.indice-aree li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--oro);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media (min-width:900px){
  .indice-aree li{grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(20px,3vw,40px);align-items:baseline}
  .indice-aree .rom{grid-row:auto;font-size:1.6rem}
  .indice-aree p{grid-column:3}
  .indice-aree .chi-segue{grid-column:3}
}
/* al passaggio la riga si accende solo se porta da qualche parte (nelle pagine delle figure le righe non sono collegamenti) */
@media (hover:hover) and (pointer:fine){
  .indice-aree li:has(a):hover::after{transform:scaleX(1)}
  .indice-aree li:has(a):hover .rom{opacity:1}
  .indice-aree li:has(a):hover h3{transform:translateX(6px)}
  .indice-aree li:has(a):hover .chi-segue .freccia{transform:translateX(4px);background:var(--bordeaux);color:var(--avorio)}
}

/* il motto, a respiro pieno */
.citazione figure{text-align:center;padding:clamp(24px,4vw,56px) 0}
.citazione blockquote p{font-family:var(--titoli);color:var(--bordeaux);font-size:clamp(2.1rem,1.2rem + 4.2vw,4.8rem);line-height:1.06;letter-spacing:-.01em;max-width:13em;margin:0 auto;text-wrap:balance}
.citazione .virgolette{display:block;font-size:2em;line-height:1;height:.5em;color:var(--oro)}
.citazione figcaption{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:clamp(24px,3vw,36px);font-size:var(--s-small);letter-spacing:.24em;text-transform:uppercase;font-weight:700}
.citazione figcaption::before,.citazione figcaption::after{content:"";width:36px;height:1px;background:var(--oro)}

/* come lavoriamo */
.principi{display:grid;justify-items:center;text-align:center;max-width:1040px;margin:0 auto}
.principio{display:grid;gap:12px;align-content:start;justify-items:center;padding:24px 0;max-width:24em}
.principio+.principio::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--oro);margin:0 auto 20px}
.principio h3{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.3rem)}
@media (min-width:900px){
  .principi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .principio{padding:8px clamp(20px,3vw,44px);max-width:none;border-left:1px solid var(--filo);height:100%}
  .principio:first-child{border-left:0}
  .principio+.principio::before{content:none}
}
.percorso{max-width:900px;margin:clamp(56px,8vw,96px) auto 0;display:grid;gap:16px;text-align:center}
.percorso .linea{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;font-family:var(--titoli);color:var(--bordeaux);font-size:clamp(1.15rem,1rem + .8vw,1.6rem)}
.percorso .tratto{height:1px;background:var(--oro);position:relative}
.percorso .tratto::before,.percorso .tratto::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--oro);transform:translateY(-50%)}
.percorso .tratto::before{left:0}
.percorso .tratto::after{right:0}
.percorso .nota{font-size:var(--s-small);letter-spacing:.2em;text-transform:uppercase;font-weight:700}
@media (max-width:559px){
  .percorso .linea{grid-template-columns:1fr;justify-items:center;gap:10px}
  .percorso .tratto{width:1px;height:40px}
  .percorso .tratto::before{left:50%;top:0;transform:translate(-50%,0)}
  .percorso .tratto::after{left:50%;top:auto;bottom:0;right:auto;transform:translate(-50%,0)}
}

/* per chi */
.destinatari{display:grid;justify-items:center;gap:10px;text-align:center}
.destinatari h3{font-size:clamp(2rem,1.3rem + 2.6vw,3.3rem)}
.destinatari li{display:grid;justify-items:center;gap:10px}
.destinatari li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--oro)}
@media (min-width:900px){
  .destinatari{display:flex;justify-content:center;align-items:center;gap:0}
  .destinatari li{display:flex;align-items:center;gap:0}
  .destinatari li+li::before{margin:0 clamp(20px,2.6vw,36px)}
}
#per-chi .lead{margin-top:clamp(36px,5vw,56px)}

/* contatti */
.contatti{display:grid;gap:clamp(40px,6vw,80px);align-items:start;max-width:1040px;margin:0 auto}
.recapiti{display:grid;gap:0;border-top:1px solid var(--filo);margin-top:8px}
.recapiti>div{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--filo)}
.recapiti dt{font-size:var(--s-small);letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding-top:.2em}
.recapiti dd a{display:inline-block;padding:4px 0}
/* telefoni stretti: l'etichetta va sopra, così email e numeri interi (non si spezzano) stanno nella riga */
@media (max-width:380px){.recapiti>div{grid-template-columns:1fr;gap:4px}}
@media (min-width:960px){.contatti{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.recapiti{position:sticky;top:calc(var(--barra) + 32px)}}

/* modulo */
.modulo{background:var(--velo);border:1px solid var(--filo);padding:clamp(24px,4vw,44px);display:grid;gap:22px}
.modulo h3{font-size:var(--s-h3)}
.campo{display:grid;gap:8px}
.campo label{font-weight:700;font-size:1rem}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;color:var(--grafite);background:var(--avorio);border:1px solid rgba(58,58,58,.45);border-radius:0;padding:12px 14px;min-height:48px;-webkit-appearance:none;appearance:none}
.campo select{background-image:linear-gradient(45deg,transparent 50%,var(--bordeaux) 50%),linear-gradient(135deg,var(--bordeaux) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.campo textarea{min-height:140px;resize:vertical;line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--bordeaux);outline-offset:0;border-color:var(--bordeaux)}
.aiuto{font-size:var(--s-small)}
.errore{font-size:var(--s-small);color:var(--bordeaux);font-weight:700}
.non-valido input,.non-valido select,.non-valido textarea{border-color:var(--bordeaux);border-width:2px}
.trappola{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.consenso{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start}
.consenso input{width:22px;height:22px;margin-top:2px;accent-color:var(--bordeaux)}
.consenso .errore{grid-column:1 / -1}
.invio{display:grid;gap:14px;justify-items:start}
.esito{font-size:.95rem;border-left:3px solid var(--bordeaux);padding:4px 0 4px 12px}
.conferma{font-size:var(--s-lead);line-height:1.5;color:var(--bordeaux);outline:none}
.modulo [hidden]{display:none!important}

/* ---------- piè di pagina: l'avorio torna bordeaux, con la stessa sfumatura dell'apertura ---------- */
.piede{text-align:center;padding:calc(var(--coda) + clamp(16px,3vw,40px)) 0 calc(32px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to bottom,var(--avorio) 0,var(--bordeaux) var(--coda),var(--bordeaux) 100%);
  background:linear-gradient(to bottom,var(--avorio) 0,
    color-mix(in oklab,var(--avorio) 95.7%,var(--bordeaux)) calc(var(--coda) * .125),
    color-mix(in oklab,var(--avorio) 84.4%,var(--bordeaux)) calc(var(--coda) * .25),
    color-mix(in oklab,var(--avorio) 68.4%,var(--bordeaux)) calc(var(--coda) * .375),
    color-mix(in oklab,var(--avorio) 50%,var(--bordeaux)) calc(var(--coda) * .5),
    color-mix(in oklab,var(--avorio) 31.6%,var(--bordeaux)) calc(var(--coda) * .625),
    color-mix(in oklab,var(--avorio) 15.6%,var(--bordeaux)) calc(var(--coda) * .75),
    color-mix(in oklab,var(--avorio) 4.3%,var(--bordeaux)) calc(var(--coda) * .875),
    var(--bordeaux) var(--coda),var(--bordeaux) 100%)}
.piede .dentro{display:grid;justify-items:center;gap:36px}
.piede .logo,.piede .logo img{width:200px}
.piede .legale{border-top:1px solid var(--filo-chiaro);padding-top:24px;font-size:var(--s-small);line-height:1.7;opacity:.9;display:grid;justify-items:center;gap:12px;width:100%}
.piede .legale p{max-width:52em}
.piede .collegamenti{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px}

/* ---------- pagine delle figure professionali (professionisti/) ---------- */
/* apertura corta: nella prima schermata si vedono già il nome, il paragrafo introduttivo e l'inizio di "Cosa fa" */
.apertura.breve{--coda:clamp(72px,11vh,140px);padding-top:calc(var(--barra) + env(safe-area-inset-top,0px) + clamp(20px,4vw,56px));padding-bottom:calc(var(--coda) + clamp(8px,2vw,24px))}
.apertura.breve .dentro{min-height:0;gap:clamp(14px,2vw,22px)}
.apertura.breve+.parte .apri{margin-bottom:clamp(28px,4vw,56px)}
.apertura.breve+.parte .arco{width:clamp(110px,14vw,170px)}
.briciole ol{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;font-size:var(--s-small);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--oro)}
.briciole li+li::before{content:"·";margin-right:10px;color:rgba(246,242,234,.5)}
.briciole a{color:rgba(246,242,234,.86);text-decoration:none}
.briciole a:hover{color:var(--avorio);text-decoration:underline}
.apertura.breve h1{font-size:clamp(2.1rem,1.1rem + 4.6vw,5rem);line-height:1.02;color:var(--avorio);max-width:12em}
.apertura .sotto{font-size:clamp(1rem,.92rem + .4vw,1.25rem);line-height:1.55;max-width:36em;color:rgba(246,242,234,.92)}
.compiti h3{font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem)}
.quando .principio h3{margin-bottom:6px}
.esempi{display:grid;gap:12px;text-align:left;max-width:24em}
.esempi li{position:relative;padding-left:20px}
.esempi li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--oro)}
.invito .azioni{display:flex;justify-content:center;margin-top:clamp(24px,3vw,36px)}
.altre h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem)}
.torna{text-align:center;margin-top:clamp(36px,5vw,56px)}
.torna a{display:inline-flex;align-items:center;gap:.8em;min-height:44px;font-size:var(--s-small);letter-spacing:.16em;text-transform:uppercase;font-weight:700;text-decoration:none}
.torna a:hover .freccia{transform:translateX(-4px);background:var(--bordeaux);color:var(--avorio)}

/* ---------- passaggio animato tra la home e le pagine delle figure (View Transitions tra documenti) ----------
   Il nome della figura "vola" dalla riga della home al titolo della pagina; il resto sfuma.
   Ogni nome compare una volta sola per pagina. Con "riduci movimento" niente animazione. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .vt-commercialista{view-transition-name:figura-commercialista}
  .vt-avvocato{view-transition-name:figura-avvocato}
  .vt-consulente{view-transition-name:figura-consulente}
  .vt-gestione{view-transition-name:figura-gestione}
  ::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}
}

/* ---------- il filo d'oro (solo in home, assets/filo.js) ----------
   Il pennacchio del logo si stacca e diventa un filo che si disegna con lo scorrimento, nei margini e tra le parti,
   mai sopra i testi. Tutto aria-hidden; senza JavaScript e con "riduci movimento" il filo non c'è. */
.filo{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:2;overflow:visible;opacity:0;transition:opacity .25s linear}
.filo.in-viaggio{opacity:1}
/* durante le misure del percorso le entrate non spostano niente */
.filo-misura .rv{transform:none!important;transition:none!important}
.filo .tratto{fill:none;stroke:var(--oro);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.filo .ramo{fill:none;stroke:var(--oro);stroke-width:1.1;stroke-linecap:round;opacity:.9}
.filo .punta{fill:var(--oro)}
.filo .punta-alone{fill:var(--oro);opacity:.22}
.filo .nodo{fill:var(--oro);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .45s cubic-bezier(.2,.9,.3,1.4)}
.filo .nodo-anello{fill:none;stroke:var(--oro);stroke-width:1;transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s ease}
.filo.nodo-acceso .nodo{transform:scale(1)}
.filo.nodo-acceso .nodo-anello{transform:scale(1);opacity:.55}
.filo .arco-finale{transition:opacity .5s ease}
/* mentre il pennacchio è staccato, al posto del logo c'è la sua copia vettoriale esatta (nello stesso punto) */
.filo-staccato .marchio-grande img{visibility:hidden}
/* l'arco dei Contatti: è il filo che si richiude; compare quando il filo arriva */
.filo-attivo #contatti .arco{opacity:0;transition:opacity .5s ease}
.filo-arrivato #contatti .arco{opacity:1}
/* le figure si accendono appena quando il filo le raggiunge */
.figura.toccata::after{transform:scaleX(1)}
.figura.toccata .freccia{border-color:var(--oro);background:rgba(176,141,87,.14)}

/* ---------- la costellazione delle aree: sei stelle che formano la M del sigillo ---------- */
.costellazione{display:block;width:clamp(210px,24vw,300px);height:auto;margin:clamp(24px,4vw,44px) auto 0;overflow:visible}
.costellazione .linea{fill:none;stroke:var(--oro);stroke-width:.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.costellazione .tocco{fill:transparent}
.costellazione .alone{fill:var(--oro);opacity:.18;transform-box:fill-box;transform-origin:center;transition:transform .35s ease,opacity .35s ease}
.costellazione .punto{fill:var(--oro);transform-box:fill-box;transform-origin:center;transition:transform .35s ease}
.costellazione .numero{font-family:var(--titoli);font-size:7.5px;fill:var(--bordeaux);text-anchor:middle;opacity:.7}
.costellazione .stella{cursor:pointer;outline:none}
svg.costellazione .stella.accesa .alone,svg.costellazione .stella:hover .alone{transform:scale(1.9);opacity:.32}
svg.costellazione .stella.accesa .punto,svg.costellazione .stella:hover .punto{transform:scale(1.35)}
svg.costellazione .stella.accesa .numero,svg.costellazione .stella:hover .numero{opacity:1}
/* la riga dell'indice accesa dalla sua stella (o raggiunta da un clic) si illumina come al passaggio del mouse */
.indice-aree li.accesa::after,.indice-aree li.raggiunta::after{transform:scaleX(1)}
.indice-aree li.accesa .rom,.indice-aree li.raggiunta .rom{opacity:1}
.indice-aree li.accesa h3{transform:translateX(6px)}
.indice-aree li.raggiunta{background:linear-gradient(to right,rgba(176,141,87,.08),rgba(176,141,87,0) 70%)}
@media (prefers-reduced-motion:no-preference){
  /* le stelle si accendono una alla volta e le linee si disegnano (classi date da assets/filo.js) */
  .costellazione.da-accendere .linea{stroke-dashoffset:1}
  .costellazione.da-accendere .punto,.costellazione.da-accendere .alone,.costellazione.da-accendere .numero{opacity:0}
  .costellazione.da-accendere .punto{transform:scale(.3)}
  .costellazione.accendi .linea{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.6,0,.3,1) var(--d,0ms)}
  .costellazione.accendi .punto{transform:none;transition:transform .5s cubic-bezier(.2,.9,.3,1.4) var(--d,0ms),opacity .3s ease var(--d,0ms)}
  .costellazione.accendi .punto,.costellazione.accendi .numero{opacity:1}
  .costellazione.accendi .alone{opacity:.18}
  .costellazione.accendi .punto,.costellazione.accendi .alone,.costellazione.accendi .numero{transition-delay:var(--d,0ms)}
  .costellazione .s1{--d:0ms}.costellazione .l1{--d:150ms}.costellazione .s2{--d:420ms}.costellazione .l2{--d:520ms}
  .costellazione .s3{--d:820ms}.costellazione .l3{--d:900ms}.costellazione .s4{--d:1200ms}.costellazione .l4{--d:1280ms}
  .costellazione .s5{--d:1580ms}.costellazione .l5{--d:1700ms}.costellazione .s6{--d:2050ms}
}

/* ---------- il sigillo che si imprime sulla conferma del modulo (e fermo in grazie.html) ----------
   Il sigillo del marchio (versione avorio, ammessa su bordeaux) su un disco di ceralacca bordeaux. */
.ceralacca{display:inline-grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--bordeaux);box-shadow:0 1px 3px rgba(58,58,58,.22)}
.ceralacca img{width:62px;height:62px}
.conferma .ceralacca{float:right;margin:0 0 12px 18px}
.non-trovata .ceralacca{margin-bottom:4px}
@media (prefers-reduced-motion:no-preference){
  .conferma.impressa .ceralacca{animation:imprimi .75s cubic-bezier(.3,.7,.2,1) both}
}
@keyframes imprimi{
  0%{opacity:0;transform:translateY(-26px) scale(1.5);box-shadow:0 14px 18px rgba(58,58,58,.18)}
  55%{opacity:1;transform:translateY(0) scale(.92);box-shadow:0 0 1px rgba(58,58,58,.3)}
  78%{transform:scale(1.04)}
  100%{transform:none;box-shadow:0 1px 3px rgba(58,58,58,.22)}
}

/* ---------- pagine di servizio (privacy, 404) ---------- */
.pagina{padding:clamp(48px,7vw,96px) 0 var(--sez)}
.testo-legale{max-width:46em}
.testo-legale .aggiornata{font-size:var(--s-small);margin-bottom:12px}
.testo-legale h1{font-size:var(--s-h2);margin-bottom:24px}
.testo-legale .lead{margin-bottom:36px}
.testo-legale h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);margin:52px 0 14px}
.testo-legale h3{font-size:1.25rem;margin:26px 0 10px}
.testo-legale p+p{margin-top:14px}
.testo-legale ul{list-style:disc;padding-left:1.2em;display:grid;gap:10px;margin:12px 0}
.testo-legale code{font-size:.9em;background:var(--velo);padding:1px 6px}
.indice{border-block:1px solid var(--filo);padding:18px 0}
.indice ol{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:var(--s-small)}
.non-trovata{display:grid;gap:24px;justify-items:start}
.non-trovata h1{font-size:var(--s-h2)}

/* ---------- movimento lieve (solo con JavaScript e senza "riduci movimento"; altrimenti tutto è fermo) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--ritardo,0ms)}
  /* i titoli salgono piano */
  .js h2.rv{transform:translateY(22px);transition-duration:1s,1.1s}
  .js .rv.dentro-schermo{opacity:1;transform:none}
  .js .rv.subito{transition:none}
  /* il pennacchio si disegna dal centro verso le punte */
  .js .arco{clip-path:inset(0 50% 0 50%);transition:clip-path 1.4s cubic-bezier(.6,0,.2,1)}
  .js .arco.dentro-schermo{clip-path:inset(0 0 0 0)}
  .js .arco.subito{transition:none}
  /* apertura: logo, settore e pulsanti compaiono piano al caricamento */
  .js .marchio-grande img{animation:sorgere 1.2s cubic-bezier(.2,.7,.2,1) both}
  .js .apertura .settore{animation:sorgere 1s .25s cubic-bezier(.2,.7,.2,1) both}
  .js .apertura .azioni{animation:sorgere 1s .4s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes sorgere{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

@media print{
  .barra,.salta{display:none}
  .scuro{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* telefono stretto: accanto al nome della figura resta solo la freccia (la scritta "Cosa fa" resta per i lettori di
   schermo); delle briciole resta solo "Minerva Partners" */
@media (max-width:479px){
  .figura .cosa{font-size:0;gap:0;letter-spacing:0}
  .briciole ol{letter-spacing:.1em}
  .briciole li:not(:first-child){display:none} /* il nome della figura è già nel titolo */
}