/* testata.css — GENERATO, non si modifica a mano.

   Prodotto da strumenti/sincronizza_testata.py estraendo da uav.css i
   blocchi marcati CONDIVISO. Lo caricano le tre pagine migrate dal vecchio
   sito, che conservano il proprio CSS incorporato e quindi non possono
   prendere uav.css intero.

   Se serve cambiare una di queste regole: si cambia in uav.css, si rilancia
   lo script, si committano tutti e due i file. test_impianto.py verifica che
   coincidano. */

:root{
  --nero:#000000;
  --crema:#D5D0C8;
  --oro:#B8A04A;
  --oro-12:rgba(184,160,74,.12);
  --oro-18:rgba(184,160,74,.18);
  --bordo:#1A1917;
  --bordo-forte:#2E2C28;
  /* Testo secondario: 6 a 1 sul nero; il grigio di prima stava a 3,6 a 1.
     Decisione 76. */
  --grigio:#8E8882;
  --grigio-scuro:#3A3835;
  --superficie-1:#0A0A09;
  --superficie-2:#0F0F0E;
  --superficie-3:#141412;
  /* Il bronzo della sfumatura di testata: l'oro scurito, dove Growtize ha il
     blu (decisione 28). */
  --bronzo:#534821;
  --sans:'Montserrat',sans-serif;
  --serif:'Cormorant Garamond',serif;
  /* Corpo della narrazione: 17 px sul computer, 16,5 sul telefono, dentro
     i 16-18 di R-07 (decisione 75). */
  --corpo:1.0625rem;
}

*{box-sizing:border-box;}

/* Collegamento di salto: primo elemento del corpo, visibile al focus. */
.salto{
  position:absolute;left:-999px;top:0;z-index:100;
  background:var(--crema);color:var(--nero);
  padding:.75rem 1.25rem;
  font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.75rem;text-decoration:none;
}
.salto:focus{left:1rem;top:1rem;}

/* === testata, menu, tendina === */
/* Decisione 28 (2026-09-11): la testata replica quella di growtizeholding.com,
   come ha chiesto Emilio, portata sui colori dello studio. Li' il fondo va dal
   nero al blu e torna nero, con un filo luminoso di due pixel sotto; qui il
   blu diventa il bronzo che si ottiene scurendo l'oro, e il filo e' oro.
   Le voci passano dal maiuscolo spaziato al tondo, come le loro. */
.testata{
  position:relative;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5rem 2.5rem;padding:1.15rem 3rem;min-height:92px;
  background:var(--nero);
  background:linear-gradient(to right,rgba(20,20,18,.94),rgba(83,72,33,.94),rgba(20,20,18,.94));
  /* Interlinea dichiarata, non ereditata: le tre pagine migrate portano il
     proprio CSS con un'interlinea diversa, e la testata risultava alta 105px
     invece di 108 (misurato nel Task 13). Il punto 20 vuole che le pagine
     sembrino lo stesso studio: la testata non puo' dipendere da cosa c'e'
     sotto. */
  line-height:1.8;
}
.testata::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:radial-gradient(var(--oro) 10%,rgba(0,0,0,0) 90%);
  pointer-events:none;
}
/* Il marchio come il logo dello studio: UAV in corsivo, il filo oro, e sotto
   & ASSOCIATI in maiuscoletto. */
.marchio{
  display:inline-flex;flex-direction:column;align-items:center;gap:.3rem;
  color:var(--crema);text-decoration:none;line-height:1;
}
.marchio-uav{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.9rem;letter-spacing:.04em;}
.marchio-filo{display:block;width:3.1rem;height:1px;background:var(--oro);}
.marchio-associati{font-family:var(--sans);font-weight:500;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;}
.menu{
  display:flex;flex-wrap:wrap;align-items:center;gap:2.1rem;
  list-style:none;margin:0;padding:0;
  /* Il corpo dichiarato anche qui, non solo su .voce: la riga di ciascun <li>
     e' alta quanto il proprio corpo per l'interlinea, e senza questa riga
     dipenderebbe da quello della pagina sotto (misurato nel Task 13). */
  font-size:.95rem;
}
.voce{
  font-family:var(--sans);font-weight:600;letter-spacing:.01em;font-size:.95rem;
  color:var(--crema);text-decoration:none;
}
.voce:hover{color:var(--oro);}
.voce[aria-current="page"]{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.45em;
}
.voce-tendina{position:relative;list-style:none;}
/* La tendina resta staccata dalla voce, ma lo stacco non puo' essere un
   margine: il margine sta fuori dalla tendina e fuori dalla voce, quindi il
   puntatore che scende da "Presenza" verso Monaco perdeva l'hover proprio
   li' e la tendina spariva prima di essere raggiunta (riprodotto con un
   passaggio vero del mouse il 2026-09-10, segnalato da Emilio: le tre citta'
   non erano cliccabili). Il ponte ::before riempie lo stacco ed e' parte della
   tendina, quindi l'hover non si interrompe. z-index 200 e non 10: sulla
   pagina di vendita la fascia ISTAT e' sticky con z-index 100 e sta subito
   sotto la testata, e copriva la tendina aperta. */
.tendina{
  display:none;position:absolute;top:calc(100% + .75rem);left:-1rem;z-index:200;
  margin:0;padding:.5rem;min-width:12rem;
  list-style:none;
  background:var(--superficie-3);
  background:linear-gradient(180deg,rgba(20,20,18,.98),rgba(10,10,9,.98));
  border:1px solid rgba(184,160,74,.25);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.tendina::before{
  content:"";position:absolute;left:-1px;right:-1px;
  top:calc(-.75rem - 1px);height:calc(.75rem + 1px);
}
.voce-tendina:hover .tendina,
.voce-tendina:focus-within .tendina{display:block;}
.tendina a{
  display:block;padding:.6rem .9rem;border-radius:8px;
  font-family:var(--sans);font-weight:500;letter-spacing:.01em;font-size:.9rem;
  color:var(--crema);text-decoration:none;
}
.tendina a:hover{background:rgba(184,160,74,.12);color:var(--oro);}
/* Dicitura "Private Advisory" accanto al marchio, separata da un filo
   verticale (la spec la vuole nell'intestazione, non sopra l'H1). */
.marchio-blocco{display:flex;flex-direction:row;align-items:center;gap:1.1rem;}
.marchio-etichetta{
  font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.6rem;color:var(--crema);opacity:.7;margin:0;
  padding-left:1.1rem;border-left:1px solid rgba(213,208,200,.25);line-height:1.6;
}

/* Il pulsante del menu a tendina sul telefono (decisione 29). Sul computer
   non esiste; sul telefono compare solo se menu.js ha aggiunto .menu-pronto
   alla testata, cosi' senza script le voci restano visibili in fila. */
.menu-apri{display:none;}

@media (max-width:768px){
  .testata{padding:.9rem 1.25rem 1rem;min-height:0;gap:.75rem 1rem;}
  .marchio-uav{font-size:1.55rem;}
  /* Senza script: gap ridotto e voci piu' piccole, tutte e cinque stanno su
     un'unica riga a 375px, con margine, non al millimetro. */
  .menu{gap:.95rem;font-size:.8rem;}
  .voce{font-size:.8rem;letter-spacing:0;}

  .testata.menu-pronto{flex-wrap:nowrap;padding:.8rem 1.25rem;}
  .testata.menu-pronto .menu-apri{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    margin-left:auto;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
    color:var(--crema);border:1px solid rgba(184,160,74,.35);
    background:radial-gradient(circle at 30% 30%,rgba(184,160,74,.24),rgba(184,160,74,.04));
  }
  .menu-apri-linee,.menu-apri-linee::before,.menu-apri-linee::after{
    display:block;width:18px;height:1.5px;border-radius:1px;background:currentColor;
    transition:transform .25s ease,background-color .2s ease;
  }
  .menu-apri-linee{position:relative;}
  .menu-apri-linee::before,.menu-apri-linee::after{content:"";position:absolute;left:0;}
  .menu-apri-linee::before{top:-6px;}
  .menu-apri-linee::after{top:6px;}
  .testata.aperta .menu-apri-linee{background:rgba(0,0,0,0);}
  .testata.aperta .menu-apri-linee::before{transform:translateY(6px) rotate(45deg);}
  .testata.aperta .menu-apri-linee::after{transform:translateY(-6px) rotate(-45deg);}

  /* La tendina: sotto la testata, a tutta larghezza, le voci una sotto
     l'altra e le tre citta' gia' aperte sotto Presenza. */
  .testata.menu-pronto nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:200;
    padding:.5rem 1.25rem 1.25rem;
    /* Coprente: con un fondo appena trasparente, sotto la testata sfocata la
       pagina si leggeva attraverso la tendina (visto nella prova a 375px). */
    background:var(--superficie-3);
    background:linear-gradient(180deg,var(--superficie-3),var(--superficie-1));
    border-bottom:1px solid rgba(184,160,74,.3);
    box-shadow:0 24px 40px rgba(0,0,0,.6);
  }
  .testata.menu-pronto.aperta nav{display:block;}
  .testata.menu-pronto .menu{flex-direction:column;align-items:stretch;gap:0;font-size:1rem;}
  .testata.menu-pronto .menu > li{border-bottom:1px solid rgba(213,208,200,.08);}
  .testata.menu-pronto .menu > li:last-child{border-bottom:0;}
  .testata.menu-pronto .voce{display:block;padding:.8rem .2rem;font-size:1rem;letter-spacing:.01em;}
  .testata.menu-pronto .tendina{
    display:block;position:static;min-width:0;margin:0 0 .7rem .2rem;padding:0 0 0 .9rem;
    background:none;border:0;border-left:1px solid rgba(184,160,74,.35);border-radius:0;box-shadow:none;
  }
  .testata.menu-pronto .tendina::before{display:none;}
  .testata.menu-pronto .tendina a{padding:.45rem .6rem;font-size:.92rem;}
}

/* Collegamento discreto che riapre il banner di consenso (rilievo della
   revisione del Task 4: chi rifiuta non aveva modo di cambiare idea
   senza svuotare i dati del browser). E' un <button>, non un link, ma
   deve confondersi con le voci intorno: stessi font, peso, dimensione e
   colore di .piede a, nessun rilievo che lo faccia "urlare". Il
   comportamento vive in consenso.js. */
.piede-azione{
  background:none;border:none;margin:0;padding:0;
  font-family:var(--sans);font-weight:400;font-size:.9rem;
  color:var(--crema);text-decoration:none;cursor:pointer;
}

.consenso{
  /* Stessa ragione della testata: il banner e' identico su tutte e sedici le
     pagine e non deve ereditare l'interlinea di quella che lo ospita. */
  line-height:1.8;
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.25rem 2rem;
  background:var(--superficie-3);
  border-top:1px solid var(--bordo-forte);
  color:var(--crema);
}
.consenso p{margin:0;font-family:var(--sans);font-weight:400;font-size:.85rem;}
.consenso a{color:var(--crema);}
.consenso-azioni{display:flex;flex-wrap:wrap;gap:.75rem;}
/* Un consenso dove rifiutare non e' facile quanto accettare non e' un
   consenso valido: le due scelte condividono famiglia, peso, dimensione
   e riquadro, cosi' nessuna delle due risulta nascosta o sbiadita
   rispetto all'altra. La sola differenza e' pieno/a contorno, non
   rilievo visivo. Nessuna logica qui: il comportamento vive in
   consenso.js, di un'altra attivita'. */
.consenso button{
  font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.75rem;cursor:pointer;
  border:1px solid var(--crema);
  padding:.65rem 1.5rem;
}
.consenso-accetta{background:var(--crema);color:var(--nero);}
.consenso-rifiuta{background:transparent;color:var(--crema);}

/* Il banner nascosto (rifiuto o accettazione gia' registrati) usa
   l'attributo hidden: senza questa riga resterebbe visibile lo stesso,
   perche' il display:flex della regola sopra e' stile d'autore e vince
   sempre sullo stile predefinito del browser per [hidden]. Il
   comportamento (quando nascondere) vive in consenso.js. */
.consenso[hidden]{display:none;}

/* Avviso in linea per i servizi necessari al funzionamento della pagina
   di vendita (Wistia per il video, Whop per il pagamento): non partono
   da soli al caricamento, restano al posto del riquadro vero finche' non
   si clicca. Stessa famiglia visiva del banner sopra: riquadro scuro,
   pulsante pieno, nessun rilievo aggiuntivo. Il comportamento vive in
   consenso.js. */
.consenso-servizio-avviso{
  background:var(--superficie-1);
  border:1px solid var(--bordo);
  padding:2rem;
  text-align:center;
}
.consenso-servizio-avviso p{
  margin:0 0 1.25rem;
  font-family:var(--sans);font-weight:400;font-size:.9rem;
  color:var(--crema);
}
.consenso-servizio-pulsante{
  font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.75rem;cursor:pointer;
  background:var(--crema);color:var(--nero);
  border:1px solid var(--crema);
  padding:.65rem 1.5rem;
}

/* Il contenitore di Wistia (rilievo della revisione del Task 4): eseguito
   il vero motore fast.wistia.com, il markup semplice sotto produceva un
   riquadro alto 27px e largo zero, quindi invisibile. Il rapporto 16:9
   nasce dal trucco del padding percentuale (valido a qualunque larghezza,
   non serve il supporto di aspect-ratio) applicato al contenitore stesso;
   l'avviso prima del clic e il video vero dopo riempiono lo stesso
   riquadro, cosi' non c'e' nessun salto di layout fra i due stati. */
.consenso-video-wistia{position:relative;width:100%;padding-top:56.25%;}
.consenso-video-wistia .consenso-servizio-avviso{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.consenso-video-wistia .wistia_embed{
  position:absolute;inset:0;width:100%;height:100%;
}

/* Accessibilita' minima: contorno oro a un pixel su ogni elemento
   attivabile. E' l'unico uso di --oro oltre ai tre della style guide. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:1px solid var(--oro);outline-offset:2px;
}