/* ══════════════════════════════════════════════════════════════════
   Luisa D'Aniello — «LUCE RADENTE»  ·  v2
   Fondo bianco, sempre. La differenza fra i due mestieri è la DENSITÀ,
   non una seconda tinta.
   Scheletri: 7 · La scheda tecnica  +  2 · La colonna e il perno
              + 4 · Il nastro orizzontale (una volta sola)
   ══════════════════════════════════════════════════════════════════ */

@font-face{font-family:Serif;src:url(../fonts/serif-300.woff2)format("woff2");font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:Serif;src:url(../fonts/serif-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:Serif;src:url(../fonts/serif-400i.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Sans;src:url(../fonts/sans-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Sans;src:url(../fonts/sans-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Mono;src:url(../fonts/mono-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* La variabile della luce. Registrata: e' cio' che permette di
   TRANSIZIONARLA in CSS, quindi l'autoplay non costa un frame di JS. */
@property --t{syntax:"<number>";inherits:true;initial-value:0}

:root{
  --carta:#FFFFFF;
  --inchiostro:#0A0E14;
  --blu:#1E56A0;
  --ombra:#8FA0B8;
  --filo:#E4E9F0;
  --tenue:#5B6878;

  --serif:Serif,Georgia,"Times New Roman",serif;
  --sans:Sans,"Segoe UI",system-ui,sans-serif;
  --mono:Mono,ui-monospace,"SFMono-Regular",Consolas,monospace;

  --gabbia:min(72rem,100% - 2.6rem);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .18vw,1.07rem);
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0;letter-spacing:-.005em}
a{color:var(--blu)}
:focus-visible{outline:2px solid var(--blu);outline-offset:3px}

.salta{position:absolute;left:-9999px;top:0;z-index:99;background:var(--inchiostro);color:#fff;padding:.7rem 1.1rem}
.salta:focus{left:.5rem;top:.5rem}

section[id]{scroll-margin-top:4.6rem}

/* ── la grana: l'ombra deve sembrare che cada su qualcosa ── */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grana,none);opacity:.02;
}
body>*{position:relative;z-index:1}

/* ══════════ TESTATA — compare solo dopo il frontespizio ══════════ */
.testata{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.72rem clamp(1.3rem,4vw,3rem);
  background:rgba(255,255,255,.93);
  border-bottom:1px solid var(--filo);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s,transform .3s,visibility .3s;
}
.testata.vista{opacity:1;visibility:visible;transform:none}
@supports (backdrop-filter:blur(6px)){.testata{backdrop-filter:blur(9px)}}
.marchio{font-family:var(--serif);font-size:1.02rem;color:var(--inchiostro);text-decoration:none}
.menu{display:flex;gap:1.3rem}
.menu a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tenue);text-decoration:none;white-space:nowrap;
}
.menu a:hover{color:var(--blu)}
@media (max-width:780px){
  .testata{padding:.6rem 1.1rem}
  .menu{gap:.95rem;overflow-x:auto;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu a{font-size:.63rem}
}

/* ══════════════════════════════════════════════════════════════════
   IL FRONTESPIZIO — la firma
   ══════════════════════════════════════════════════════════════════ */
.foglio{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:5.5rem 0 3.5rem;
  border-bottom:1px solid var(--filo);
}

.frontespizio{width:var(--gabbia);margin-inline:auto;padding-left:clamp(0rem,4vw,3.4rem)}

/* ogni riga sta nel DOM due volte: ombra + inchiostro */
.riga{position:relative;display:block}
.riga .inchiostro{display:block}
/* 🔴 L'ombra e' uno PSEUDO-ELEMENTO, non testo nel DOM.
   Motivo: con due <span> uguali l'H1 valeva «Luisa Luisa D'Aniello D'Aniello»
   per i motori di ricerca e per il copia-incolla. Cosi' il testo esiste una volta sola. */
.riga::before{
  content:attr(data-ombra);
  position:absolute;inset:0;
  color:var(--ombra);
  filter:blur(.7px);
  transform:translate3d(0,0,0);
  opacity:0;
  pointer-events:none;
  user-select:none;
  white-space:inherit;
}

/* STATO FINALE, valido sempre: senza JS il frontespizio si vede finito e fermo */
.riga .inchiostro{opacity:1}

/* la luce agisce solo quando il JS ha verificato che @property c'è */
.luce .foglio .riga{
  --ti:clamp(0, calc((var(--t) - var(--i) * .045) / .62), 1);
}
/* Lo spostamento e la forza dell'ombra sono proporzionati al corpo che la getta.
   🔴 Su un nome da 13rem un'ombra lunga legge come profondita'.
      Sulla stessa riga in mono da 12px legge come un ERRORE DI STAMPA.
      Per questo ogni livello ha il proprio --sp/--spy e la propria opacita' massima --om. */
.riga{--sp:5px;--spy:3px;--om:.30}
.riga--nome{--sp:58px;--spy:34px;--om:.88}
.qualifica{--sp:9px;--spy:5px;--om:.40}

.luce .foglio .riga::before{
  transform:translate3d(calc(var(--ti) * var(--sp)),calc(var(--ti) * var(--spy)),0);
  opacity:calc(var(--ti) * var(--om));
}
.luce .foglio .riga .inchiostro{
  opacity:clamp(var(--min-ink,0), calc((var(--ti) - .5) / .34), 1);
}
/* una riga «agganciata» non si riprende piu' l'inchiostro */
.luce .foglio .riga.fissato{--min-ink:1}

.luce .foglio{transition:--t 2.2s cubic-bezier(.22,.61,.36,1) 280ms}
.luce .foglio.avvia{--t:1}
.luce .foglio.manuale{transition:none}

.nome{
  font-size:clamp(3.2rem,16vw,13rem);
  line-height:.92;
  letter-spacing:-.028em;
  margin-bottom:1.9rem;
}
.riga--nome{white-space:nowrap}

.qualifica{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.2rem,.95rem + 1.15vw,1.85rem);
  line-height:1.3;margin:0 0 2.8rem;max-width:26ch;
}

.incarichi{list-style:none;margin:0 0 2.6rem;padding:0;display:grid;gap:.42rem}
.incarichi .riga{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.5;
}
.incarichi .inchiostro{color:var(--inchiostro)}

.porte{margin:0;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em}
.porte a{text-decoration:none;border-bottom:1px solid var(--filo);padding-bottom:2px}
.porte a:hover{border-color:var(--blu)}
.porte__sep{display:inline-block;margin:0 .85rem;color:var(--ombra)}

/* ── il binario: l'angolo della luce ── */
.binario{
  position:absolute;left:clamp(.85rem,2.6vw,2.2rem);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  z-index:4;
}
.binario__titolo,.binario__valore{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tenue);writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;
}
.binario__valore{color:var(--blu)}
.binario input[type=range]{
  writing-mode:vertical-lr;direction:rtl;
  -webkit-appearance:slider-vertical;
  width:26px;height:240px;margin:0;background:transparent;cursor:ns-resize;
}
.binario input[type=range]::-webkit-slider-runnable-track{width:1px;background:var(--filo)}
.binario input[type=range]::-moz-range-track{width:1px;background:var(--filo)}
.binario input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:3px;background:var(--blu);border:0;border-radius:0;
  transform:translateX(-7.5px);
}
.binario input[type=range]::-moz-range-thumb{width:16px;height:3px;background:var(--blu);border:0;border-radius:0}

@media (max-width:900px){
  .binario{left:auto;right:.5rem}
  .binario input[type=range]{height:190px}
  .binario__titolo{display:none}
  /* Su schermo piccolo e in piena luce l'ombra debole sparisce: il pavimento
     vale pero' SOLO per il nome, che e' l'unico corpo abbastanza grande
     perche' un'ombra lunga non somigli a un doppione. */
  .luce .foglio .riga--nome::before{opacity:calc(.5 + var(--ti) * .4)}
}
@media (max-width:700px){
  /* piu' il corpo e' piccolo, piu' l'ombra deve essere un soffio:
     su un telefono 8px sotto una riga in mono da 11px sono un doppione */
  .riga{--sp:3px;--spy:2px;--om:.20}
  .riga--nome{--sp:19px;--spy:11px;--om:.8}
  .qualifica{--sp:6px;--spy:4px;--om:.30}
  .frontespizio{padding-left:0;padding-right:2.6rem}
  .incarichi{grid-template-columns:1fr 1fr;gap:.42rem 1rem}
  .incarichi .riga{font-size:.66rem;letter-spacing:.1em}
}

/* ══════════════════════════════════════════════════════════════════
   METÀ FORENSE — 7 · La scheda tecnica. Incisa.
   ══════════════════════════════════════════════════════════════════ */
.fascia{padding:clamp(3.4rem,7vw,6.2rem) 0}
.incisa{border-bottom:1px solid var(--filo)}

.gabbia{
  width:var(--gabbia);margin-inline:auto;
  display:grid;grid-template-columns:8.5rem 1fr;gap:clamp(1.2rem,3vw,3rem);
}
@media (max-width:820px){.gabbia{grid-template-columns:1fr;gap:.9rem}}

.folio{
  margin:.45rem 0 0;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blu);
}
.corpo{max-width:46rem}

.incisa h2{font-size:clamp(1.62rem,1.2rem + 1.8vw,2.6rem);line-height:1.14;margin-bottom:1.1rem}
.incisa h3{font-size:1.06rem;font-weight:400;margin-bottom:.4rem}
.guida{color:var(--tenue);margin:0 0 2rem;max-width:34rem}
.grande{font-family:var(--serif);font-size:clamp(1.1rem,1rem + .6vw,1.38rem);line-height:1.45;margin:0 0 1.3rem}
.etichetta{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tenue);margin:0 0 .7rem;
}
.margine{
  margin:1.8rem 0 0;padding-top:.9rem;border-top:1px solid var(--filo);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);
}

.due{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border-top:1px solid var(--filo)}
.due article{padding:1.2rem 1.4rem 1.2rem 0;border-bottom:1px solid var(--filo)}
.due article+article{padding-left:1.4rem;border-left:1px solid var(--filo)}
.due p{margin:0;color:var(--tenue);font-size:.95rem}
@media (max-width:700px){
  .due{grid-template-columns:1fr}
  .due article+article{padding-left:0;border-left:0}
}

/* ── il rilievo variabile: solo nella metà forense ──
   🔴 Guidato dallo scroll in CSS PURO, senza JS e senza IntersectionObserver.
      Motivo: un titolo che parte invisibile e dipende da uno script per
      ricomparire, se lo script non gira sparisce per sempre. Con
      `animation-timeline` + `both` lo stato finale e' garantito, e dove
      non e' supportato il titolo e' semplicemente li', gia' leggibile. */
.rilievo{position:relative;display:block}
.rilievo::before{
  content:attr(data-ombra);
  position:absolute;inset:0;color:var(--ombra);filter:blur(.6px);
  opacity:0;pointer-events:none;user-select:none;
}
.rilievo .inchiostro{display:block;opacity:1}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .incisa:not(.ferma) .rilievo .inchiostro{
      animation:prende-inchiostro linear both;
      animation-timeline:view();animation-range:entry 6% cover 30%;
    }
    .incisa:not(.ferma) .rilievo::before{
      animation:ombra-che-rientra linear both;
      animation-timeline:view();animation-range:entry 6% cover 30%;
    }
  }
}
@keyframes prende-inchiostro{0%{opacity:0}52%{opacity:0}100%{opacity:1}}
@keyframes ombra-che-rientra{
  0%{opacity:0;transform:translate3d(24px,14px,0)}
  40%{opacity:.5}
  100%{opacity:0;transform:translate3d(0,0,0)}
}

/* la sezione ferma non si muove mai: dichiarato nel concept */
.ferma .rilievo .inchiostro{opacity:1!important;animation:none!important}
.ferma .rilievo::before{display:none}

/* ══════════ IL BANCO D'INCARICO ══════════ */
.banco{border-top:1px solid var(--filo);padding-top:1.3rem;margin-bottom:2.4rem}
.domanda-banco{border:0;margin:0 0 .95rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.domanda-banco legend{
  float:left;width:100%;padding:0;margin-bottom:.45rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);
}
.domanda-banco button{
  font-family:var(--sans);font-size:.84rem;line-height:1.2;
  padding:.44rem .8rem;cursor:pointer;
  color:var(--inchiostro);background:transparent;
  border:1px solid var(--filo);border-radius:0;
  transition:border-color .18s,color .18s,background-color .18s;
}
.domanda-banco button:hover{border-color:var(--ombra)}
.domanda-banco button[aria-pressed=true]{background:var(--blu);border-color:var(--blu);color:#fff}
.contatore{
  margin:.4rem 0 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blu);
}

.indice{border-top:1px solid var(--filo)}
.area{
  padding:1.35rem 0 1.4rem;border-bottom:1px solid var(--filo);
  transition:opacity .34s ease;
}
.area h3{
  display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  font-family:var(--serif);font-size:1.16rem;font-weight:400;margin-bottom:.35rem;
}
.area__cosa{margin:0 0 .8rem;color:var(--tenue)}
.area dl{margin:0;display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:.9rem;border-top:1px solid var(--filo);padding-top:.75rem}
.area dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tenue);margin-bottom:.2rem;
}
.area dd{margin:0;font-size:.9rem}
@media (max-width:700px){.area dl{grid-template-columns:1fr;gap:.6rem}}

.permalink{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tenue);text-decoration:none;opacity:0;transition:opacity .2s,color .2s;
}
.area:hover .permalink,.permalink:focus-visible{opacity:1}
.permalink:hover{color:var(--blu)}
@media (hover:none){.permalink{opacity:1}}

/* la carta che si solleva */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .area:not(.ferma):hover{transform:translateY(-3px);transition:transform .2s ease,opacity .34s ease}
}
/* le aree non pertinenti si APPIATTISCONO: non spariscono, smorzano */
.area.piatta{opacity:.18}
.area.piatta .permalink{opacity:0}
/* l'area bersaglio di un link arriva evidenziata */
.area:target{box-shadow:-1.1rem 0 0 -1rem var(--blu);padding-left:1.1rem;margin-left:-1.1rem}

.area.evidenziata{opacity:1!important}

/* ══════════ TESTATE TV ══════════ */
.testate{
  font-family:var(--serif);font-size:clamp(1.3rem,1rem + 1.4vw,2.05rem);font-weight:300;
  line-height:1.3;margin:0 0 1.1rem;
}
.testate span{color:var(--ombra);margin:0 .35rem}

/* ══════════ IL NASTRO — 4 · non si ferma mai ══════════ */
.nastro{overflow:hidden;padding:1.55rem 0;border-bottom:1px solid var(--filo)}
.nastro__pista{display:flex;width:max-content;animation:scorre 46s linear infinite}
.nastro__gruppo{display:flex;flex-shrink:0}
.nastro__gruppo span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tenue);padding:0 1.9rem;white-space:nowrap;
}
.nastro__gruppo span::after{content:"·";margin-left:1.9rem;color:var(--ombra)}
@keyframes scorre{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.nastro__pista{animation:none}}

/* ══════════ FORMAZIONE ══════════ */
.titoli{margin:0;border-top:1px solid var(--filo)}
.titoli>div{
  display:grid;grid-template-columns:1fr auto;gap:.6rem 1.4rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--filo);
}
.titoli dt{font-family:var(--serif);font-size:1.03rem}
.titoli dd{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--tenue);text-align:right}
.titoli b{color:var(--blu);font-weight:400}
@media (max-width:600px){
  .titoli>div{grid-template-columns:1fr}
  .titoli dd{text-align:left}
}

/* ══════════ LA SOGLIA ══════════ */
.soglia{
  padding:clamp(5rem,13vw,10rem) 0;
  text-align:center;
  border-bottom:1px solid var(--filo);
}
.soglia p{
  margin:0 auto;width:var(--gabbia);
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.35rem,1rem + 2vw,2.35rem);line-height:1.35;
  color:var(--inchiostro);
}

/* ══════════════════════════════════════════════════════════════════
   METÀ CLINICA — 2 · La colonna e il perno.
   Le ombre vanno a zero, i filetti spariscono, il mono sparisce.
   Il fondo resta bianco: cambia la DENSITÀ.
   ══════════════════════════════════════════════════════════════════ */
.aperta{padding:clamp(4rem,9vw,7.5rem) 0}
.clinica{
  width:var(--gabbia);margin-inline:auto;
  display:grid;grid-template-columns:1fr 16rem;gap:clamp(1.6rem,5vw,4.5rem);
  align-items:start;
}
@media (max-width:860px){.clinica{grid-template-columns:1fr}}

.clinica__testo{max-width:38rem}
.aperta h2{font-size:clamp(1.62rem,1.2rem + 1.8vw,2.55rem);line-height:1.18;margin-bottom:1.3rem}
.aperta p{line-height:1.8;margin:0 0 1.3rem}
.aperta em{font-style:italic;font-family:var(--serif);font-size:1.05em}

.clinica__elenco{list-style:none;margin:0 0 1.9rem;padding:0;display:grid;gap:.72rem}
.clinica__elenco li{line-height:1.6}

.perno{position:sticky;top:6rem}
.perno__vuoto{height:9.5rem}
.perno__contenuto p{font-size:.93rem;line-height:1.7;margin:0 0 .75rem;color:var(--tenue)}
.perno__contenuto p:first-child{color:var(--inchiostro);font-family:var(--serif);font-size:1.05rem}
@media (max-width:860px){.perno{position:static}.perno__vuoto{display:none}}

.aperta details{border-bottom:1px solid var(--filo)}
.aperta summary{
  cursor:pointer;list-style:none;padding:.95rem 2rem .95rem 0;position:relative;
  font-family:var(--serif);font-size:1.06rem;
}
.aperta summary::-webkit-details-marker{display:none}
.aperta summary::after{
  content:"";position:absolute;right:.3rem;top:1.35rem;
  width:8px;height:8px;border-right:1px solid var(--blu);border-bottom:1px solid var(--blu);
  transform:rotate(45deg);transition:transform .22s;
}
.aperta details[open] summary::after{transform:rotate(-135deg)}
.aperta details p{margin:0 0 1.1rem;color:var(--tenue);max-width:34rem}

/* ══════════ RICHIESTA, AZIONI, RECAPITO ══════════ */
.richiesta{margin:2rem 0 1.6rem;max-width:34rem}
.richiesta textarea{
  display:block;width:100%;margin:0 0 .7rem;padding:.9rem 1rem;
  font-family:var(--mono);font-size:.78rem;line-height:1.7;color:var(--inchiostro);
  background:#FBFCFD;border:1px solid var(--filo);border-radius:0;resize:vertical;
}
.richiesta textarea:focus{outline:none;border-color:var(--blu)}

.azioni{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 0}
.bottone{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:var(--sans);font-size:.88rem;font-weight:600;
  padding:.78rem 1.3rem;border-radius:0;
  border:1px solid var(--blu);color:var(--blu);background:transparent;
  transition:background-color .2s,color .2s;
}
.bottone--pieno{background:var(--blu);color:#fff}
.bottone:hover{background:var(--blu);color:#fff}
.bottone.fatto{background:var(--inchiostro);border-color:var(--inchiostro);color:#fff}

.recapito{
  font-style:normal;margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--filo);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;line-height:2;
  text-transform:uppercase;color:var(--tenue);
}

/* ══════════ PIEDE ══════════ */
.piede{padding:3rem 0 2.4rem;border-top:1px solid var(--filo)}
.piede .corpo p{margin:.18rem 0;font-size:.86rem;color:var(--tenue)}
.piede__nome{font-family:var(--serif);font-size:1.05rem;color:var(--inchiostro)!important;margin-bottom:.45rem!important}
.piede__firma{margin-top:1.4rem!important;padding-top:1rem;border-top:1px solid var(--filo);font-size:.78rem!important}

/* ══════════ MOVIMENTO RIDOTTO ══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .luce .foglio{transition:none!important}
  .riga::before{opacity:0!important;transform:none!important}
  .riga .inchiostro{opacity:1!important}
  .rilievo{opacity:1!important;text-shadow:none!important}
}

/* un'opzione che porterebbe a zero aree e' spenta, non nascosta */
.domanda-banco button.spento{
  color:var(--ombra);border-color:var(--filo);cursor:not-allowed;
  text-decoration:line-through;text-decoration-thickness:1px;
}
.domanda-banco button.spento:hover{border-color:var(--filo)}