/* ════════════════════════════════════════════════════════════════════
   NYI SRL — ramo Private Equity & Advisory
   Foglio di stile separato da quello ortopedico: i due rami devono
   assomigliarsi il meno possibile. Qui niente blu, niente pillole,
   niente ombre morbide. Antracite, carta, un solo accento d'ottone,
   e il peso lo porta la tipografia.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Blu notte molto più profondo di quello ortopedico (#1B3F7A):
     i due rami restano parenti ma non si confondono. */
  --inchiostro: #0A1424;
  --carbone:    #101F38;
  --avorio:     #F2F1ED;   /* la carta */
  --ottone:     #C2A24C;   /* l'oro: l'unico accento */
  --vinaccia:   #16325C;   /* blu pieno, per i bottoni */
  --pietra:     #7D8796;
  --grafite:    #3B4654;
}

/* ─── Superfici del browser ─────────────────────────────────────── */

::selection { background: var(--vinaccia); color: #fff; }

a:focus-visible, button:focus-visible {
  outline: 1px solid var(--ottone);
  outline-offset: 4px;
}

html { scrollbar-color: #BCC3CC var(--avorio); }
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--avorio); }
  ::-webkit-scrollbar-thumb { background: #BCC3CC; border: 3px solid var(--avorio); }
}

/* Le cifre non devono ballare */
.cifre, .op-anno { font-variant-numeric: tabular-nums; }

/* ─── Testata ───────────────────────────────────────────────────── */

.testata-fin {
  background: transparent;
  transition: background-color .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.testata-fin.piena {
  background: rgba(13, 17, 23, .94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: rgba(245, 243, 239, .1);
}

.voce-fin { color: rgba(245, 243, 239, .72); transition: color .25s ease; }
.voce-fin:hover { color: var(--avorio); }

/* Il bottone del menu sul telefono prendeva il colore del testo della
   pagina, blu notte: sopra la fotografia della copertina spariva. */
#apri-menu { color: var(--avorio); }

.marchio-scuro { display: none; }

.icona-casa-fin {
  width: 34px; height: 34px;
  flex: none;
  display: flex;
  align-items: center; justify-content: center;
  color: rgba(245, 243, 239, .7);
  transition: color .25s ease;
}
/* Sopra i 1240px c'è spazio per tenerla fuori, sotto le frecce del
   browser; sotto quella soglia sta in riga accanto al marchio. */
@media (min-width: 1240px) {
  .icona-casa-fin {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.icona-casa-fin svg { width: 18px; height: 18px; }
.icona-casa-fin:hover { color: var(--ottone); }


/* ─── Apertura ──────────────────────────────────────────────────── */

.apertura-fin {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--inchiostro);
}
@supports not (min-height: 100svh) {
  .apertura-fin { min-height: 100vh; }
}

/* ─── Le quattro scene ──────────────────────────────────────────────
   Stanno una sopra l'altra: quella attiva è opaca, le altre no.
   La dissolvenza dura un secondo e mezzo, abbastanza lenta da non
   somigliare a un carosello pubblicitario.                        */

.scene { position: absolute; inset: 0; }

.scena {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  /* un respiro lentissimo: l'immagine non è mai del tutto ferma */
  animation: respiro 28s ease-in-out infinite alternate;
}
.scena-attiva { opacity: 1; }

@keyframes respiro {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* Il velo tiene scuro il lato del titolo: le scene hanno luminosità
   molto diverse fra loro e il bianco deve restare leggibile su tutte. */
.velo-scene {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 56% 44% at 50% 50%, rgba(10,20,36,.48) 0%, rgba(10,20,36,.16) 100%),
    linear-gradient(to bottom, rgba(10,20,36,.6) 0%, rgba(10,20,36,.08) 38%, rgba(10,20,36,.68) 100%);
}

/* ─── Entrata ───────────────────────────────────────────────────── */

.sale { animation: salita 1.1s cubic-bezier(.22,.61,.36,1) both; }
.ritardo-1 { animation-delay: .12s; }
.ritardo-2 { animation-delay: .26s; }
.ritardo-3 { animation-delay: .4s; }

@keyframes salita {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sale { animation: none; }
}

/* ─── Bottoni: squadrati, non pillole ───────────────────────────── */

.bottone-ottone {
  background: var(--vinaccia);
  color: #fff;
  font-weight: 500;
  transition: background-color .3s ease, color .3s ease;
}
.bottone-ottone:hover { background: #1E4278; }

.bottone-contorno {
  border: 1px solid rgba(245, 243, 239, .35);
  color: var(--avorio);
  font-weight: 500;
  transition: border-color .3s ease, background-color .3s ease;
}
.bottone-contorno:hover { border-color: var(--avorio); background: rgba(245,243,239,.07); }

.bottone-scuro {
  background: var(--inchiostro);
  color: var(--avorio);
  font-weight: 500;
  transition: background-color .3s ease;
}
.bottone-scuro:hover { background: var(--vinaccia); }

/* Il marchio del partner in testata, nella sua versione in chiaro:
   quella scura sparirebbe sul fondo notte. Niente riquadro intorno. */
.marchio-partner {
  opacity: .85;
  transition: opacity .3s ease;
}
.marchio-partner:hover { opacity: 1; }

/* Lo stesso marchio in fondo ai mandati, ma qui e' un passaggio, non
   un bollino: si accende e la riga sotto si sottolinea, cosi' si capisce
   che ci si clicca sopra. */
.marchio-dealroom { opacity: .9; transition: opacity .3s ease; }
.marchio-dealroom:hover { opacity: 1; }
.marchio-dealroom .invito { border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.marchio-dealroom:hover .invito { border-bottom-color: var(--ottone); }

/* ─── Pagine a fondo bianco ─────────────────────────────────────── */

/* Qui la testata non può restare trasparente: il marchio chiaro
   e le voci del menu sparirebbero sulla carta. */
body.pagina-chiara .testata-fin {
  background: rgba(13, 17, 23, .94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: rgba(245, 243, 239, .1);
}

/* Il contorno chiaro non si vede sul bianco: serve il suo opposto. */
.bottone-contorno-scuro {
  border: 1px solid rgba(10, 20, 36, .28);
  color: var(--inchiostro);
  font-weight: 500;
  transition: border-color .3s ease, background-color .3s ease;
}
.bottone-contorno-scuro:hover {
  border-color: var(--inchiostro);
  background: rgba(10, 20, 36, .05);
}

.logo-strategic {
  width: 100%;
  max-width: 420px;
  height: auto;
}

/* ─── Servizi ───────────────────────────────────────────────────── */

/* Niente riquadri: separatori a filo, come un indice. Le schede
   tutte uguali sono la scorciatoia più riconoscibile. */
.griglia-servizi {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(245, 243, 239, .14);
}
@media (min-width: 768px)  { .griglia-servizi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .griglia-servizi { grid-template-columns: repeat(3, 1fr); } }

.servizio {
  padding: 2.5rem 0 2.75rem;
  border-bottom: 1px solid rgba(245, 243, 239, .14);
  transition: background-color .35s ease;
}
@media (min-width: 768px) {
  .servizio { padding-right: 2.5rem; }
  .servizio:nth-child(2n) { padding-left: 2.5rem; border-left: 1px solid rgba(245,243,239,.14); }
}
@media (min-width: 1100px) {
  .servizio:nth-child(2n) { padding-left: 0; border-left: 0; }
  .servizio:not(:nth-child(3n+1)) {
    padding-left: 2.5rem;
    border-left: 1px solid rgba(245, 243, 239, .14);
  }
}

.servizio p {
  color: rgba(245, 243, 239, .6);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
}
.servizio:hover p { color: rgba(245, 243, 239, .78); }
.servizio h3 { transition: color .3s ease; }
.servizio:hover h3 { color: var(--ottone); }

/* ─── Mandati ───────────────────────────────────────────────────── */

/* Tre schede che portano gia' la fotografia, tenuta scura perche' il
   testo deve restare leggibile. Col mouse sopra, la scheda si allarga,
   il velo si alza e salgono i dati. Dove il mouse non c'e' (telefono,
   tavoletta) i dati stanno sempre in vista. */

.griglia-mandati {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.mandato {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--inchiostro);
  color: var(--avorio);
}

.mandato::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--foto);
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 2.4s ease;
}

/* Due strati distinti, e non e' un vezzo: il velo piatto si alza col
   mouse e lascia vedere la fotografia, la sfumatura sotto il testo
   invece non si muove mai, altrimenti le parole finirebbero sopra il
   cielo chiaro e non si leggerebbero piu'. */
.mandato::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 36, .62);
  transition: opacity .55s ease;
}

.man-corpo {
  position: relative;
  z-index: 1;
  padding: 2.5rem 2rem;
  background: linear-gradient(to top,
    rgba(10, 20, 36, .95) 20%,
    rgba(10, 20, 36, .72) 62%,
    rgba(10, 20, 36, 0) 100%);
}

.man-anno {
  color: var(--ottone);
  font-size: 12px;
  letter-spacing: .18em;
  margin-bottom: 1rem;
}

.man-titolo {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.3;
  text-wrap: balance;
}

.man-dati {
  display: grid;
  gap: .85rem;
  margin-top: 1.75rem;
}
.man-dati dt {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245, 243, 239, .5);
}
.man-dati dd {
  font-size: 15px;
  font-weight: 300;
  color: rgba(245, 243, 239, .92);
  margin-top: .15rem;
}

.mandato-partecipazioni { --foto: url('../img/finanza/6-partecipazioni.jpg'); }
.mandato-immobiliare    { --foto: url('../img/finanza/5-immobiliare.jpg'); }
.mandato-ricettivo      { --foto: url('../img/finanza/7-ricettivo.jpg'); }

/* Da 900px in su stanno affiancate e si allargano. */
@media (min-width: 900px) {
  .griglia-mandati { display: flex; }
  .mandato {
    flex: 1 1 0;
    min-height: 520px;
    transition: flex-grow .65s cubic-bezier(.4, 0, .2, 1);
  }
}

@media (hover: hover) and (min-width: 900px) {
  .man-dati {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease .08s, transform .5s ease .08s;
  }
  .mandato:hover,
  .mandato:focus-within { flex-grow: 2.2; }

  .mandato:hover::before,
  .mandato:focus-within::before { transform: scale(1); }

  .mandato:hover::after,
  .mandato:focus-within::after { opacity: .3; }

  .mandato:hover .man-dati,
  .mandato:focus-within .man-dati { opacity: 1; transform: none; }
}

/* Chi ha chiesto meno movimento non se lo ritrova addosso. */
@media (prefers-reduced-motion: reduce) {
  .mandato,
  .mandato::before,
  .mandato::after,
  .man-dati { transition: none; }
}

/* ─── Filigrana della pagina del portale ────────────────────────── */

/* La fotografia sta sotto a tutto, appena accennata: deve farsi
   sentire senza mai contendere la lettura al testo. */
.pagina-portale {
  position: relative;
  overflow: hidden;
  background: #fff;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
@supports not (min-height: 100svh) {
  .pagina-portale { min-height: 100vh; }
}

.pagina-portale::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/finanza/8-copertina.jpg');
  background-size: cover;
  background-position: center;
  opacity: .49;
  pointer-events: none;
}

/* Un velo bianco al centro: e' li' che cadono il marchio e il testo. */
.pagina-portale::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, .9) 0%,
    rgba(255, 255, 255, .58) 44%,
    rgba(255, 255, 255, .08) 100%);
  pointer-events: none;
}

.pagina-portale > * { position: relative; z-index: 1; }

/* ─── Modulo di contatto ────────────────────────────────────────── */

.modulo {
  background: #fff;
  padding: 2.25rem 2rem 2.5rem;
  border: 1px solid rgba(10, 20, 36, .09);
}

.campo { margin-bottom: 1.35rem; }
.campo:last-of-type { margin-bottom: 0; }

.campo label {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pietra);
  margin-bottom: .55rem;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;            /* sotto i 16px il telefono ingrandisce da solo */
  font-weight: 300;
  color: var(--inchiostro);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(10, 20, 36, .22);
  padding: .55rem 0;
  border-radius: 0;           /* iOS arrotonda i campi di sua iniziativa */
  transition: border-color .25s ease;
}
.campo textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.campo select { appearance: none; cursor: pointer; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-color: var(--ottone);
}

/* La trappola per i bot: via dallo schermo, ma non display:none,
   che alcuni riempitori automatici saltano apposta. */
.campo-esca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consenso {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-top: 1.75rem;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pietra);
}
.consenso input {
  margin-top: .25rem;
  flex: none;
  accent-color: var(--vinaccia);
  width: 16px;
  height: 16px;
}

/* L'esito non e' una riga qualunque: quando qualcosa manca deve
   fermare l'occhio, altrimenti si ripreme Invia senza capire perche'. */
.esito-modulo {
  margin-top: 1.25rem;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pietra);
}
.esito-modulo:empty { display: none; margin: 0; }

.esito-modulo.errore {
  color: #8A2222;
  background: rgba(138, 34, 34, .07);
  border-left: 3px solid #8A2222;
  padding: .9rem 1.1rem;
}

/* La casella del consenso, quando non e' spuntata, va trovata subito. */
.consenso.mancante {
  color: #8A2222;
  background: rgba(138, 34, 34, .07);
  padding: .75rem .9rem;
  margin-left: -.9rem;
  margin-right: -.9rem;
}
.consenso.mancante input {
  outline: 2px solid #8A2222;
  outline-offset: 2px;
}

.modulo button[disabled] { opacity: .55; cursor: progress; }

/* ─── Recapiti ──────────────────────────────────────────────────── */

.recapiti dt {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pietra);
  margin-top: 1.75rem;
}
.recapiti dt:first-child { margin-top: 0; }
.recapiti dd {
  font-size: 17px;
  margin-top: .4rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(13, 17, 23, .1);
}
.recapiti dd a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.recapiti dd a:hover { color: var(--ottone); }

/* Il titolo d'apertura va a capo da solo, in modo bilanciato: gli
   a capo forzati si rompono al primo cambio di larghezza. */
.titolo-apertura { text-wrap: balance; }

/* La parola «insieme» è quella che porta il messaggio: corsivo,
   rame rosato, e un filetto che la sottolinea senza toccarla. */
.parola-forte {
  font-style: italic;
  color: var(--ottone);
  position: relative;
  display: inline-block;
  text-transform: none;
}
.parola-forte::after {
  content: "";
  position: absolute;
  left: .06em; right: .06em;
  bottom: -.1em;
  height: 2px;
  background: var(--vinaccia);
}

/* ─── Ambiti ─────────────────────────────────────────────────────────
   Riquadri fotografici con il testo appoggiato sotto, su un velo che
   si schiarisce al passaggio del mouse. Niente carosello: tutti e
   quattro restano visibili, perché il punto è far capire in un colpo
   d'occhio quanto è largo il raggio d'azione.                      */

.ambito {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  background: var(--inchiostro);
}
@media (min-width: 1024px) { .ambito { min-height: 360px; } }

.ambito::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.ambito:hover::before { transform: scale(1.06); }

/* il velo tiene il testo leggibile e si alleggerisce al passaggio */
.ambito::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(10,20,36,.95) 0%, rgba(10,20,36,.6) 45%, rgba(10,20,36,.25) 100%);
  transition: background .5s ease;
}
.ambito:hover::after {
  background: linear-gradient(to top,
              rgba(10,20,36,.92) 0%, rgba(10,20,36,.45) 45%, rgba(10,20,36,.1) 100%);
}

/* Quelli senza fotografia non restano buchi neri: una trama discreta */
.ambito-vuoto::before {
  background-image:
    repeating-linear-gradient(135deg, rgba(242,241,237,.045) 0 1px, transparent 1px 14px);
  background-color: var(--carbone);
}

.ambito-testo {
  position: relative;
  z-index: 1;
  padding: 2rem 2rem 2.25rem;
}
.ambito-testo h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--avorio);
  margin-bottom: .6rem;
}
.ambito-testo p {
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 300;
  color: rgba(242, 241, 237, .62);
  max-width: 44ch;
}

/* ─── Le fotografie ──────────────────────────────────────────────────
   Gli indirizzi stanno qui e non negli attributi della pagina, con
   percorso relativo al foglio di stile: così funzionano sia servite
   da un server sia aprendo il file con un doppio clic, dove un
   indirizzo che inizia con «/» punterebbe alla radice del disco.  */

.scena                { background-image: url('../img/finanza/4-accordo.jpg'); }

/* ─── La fascia degli ambiti ─────────────────────────────────────────
   Una sola scena alla volta, a tutta larghezza: la frase sta al
   centro e in basso corre l'elenco dei quattro ambiti, con quello
   in corso acceso. Si può anche puntarne uno e l'immagine lo segue. */

.fascia-ambiti {
  position: relative;
  overflow: hidden;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 7rem 0;
  background: var(--inchiostro);
}
@supports not (min-height: 92svh) {
  .fascia-ambiti { min-height: 92vh; }
}

.sfondi-ambiti { position: absolute; inset: 0; }

.sfondo-ambito {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
  transform: scale(1);
}

/* L'ingrandimento riparte da capo a ogni cambio: togliendo e
   rimettendo la classe il browser rilancia l'animazione da zero.
   Dura un filo meno dell'intervallo, così si ferma prima di sfumare. */
.sfondo-attivo {
  opacity: 1;
  animation: ingrandimento 4.6s ease-out forwards;
}

@keyframes ingrandimento {
  from { transform: scale(1.002); }
  to   { transform: scale(1.11); }
}

.velo-ambiti {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 52% 40% at 50% 50%, rgba(10,20,36,.52) 0%, rgba(10,20,36,.14) 100%),
    linear-gradient(to bottom, rgba(10,20,36,.5) 0%, rgba(10,20,36,0) 26%, rgba(10,20,36,0) 74%, rgba(10,20,36,.6) 100%);
}

.frase-ambiti {
  font-size: clamp(1.45rem, 3.1vw, 2.6rem);
  line-height: 1.35;
  text-wrap: balance;
  /* Le quattro scene vanno dalla campagna chiara all'officina scura:
     un'ombra morbida tiene la frase leggibile su tutte senza dover
     riscurire le immagini. */
  text-shadow:
    0 1px 2px rgba(10, 20, 36, .55),
    0 4px 28px rgba(10, 20, 36, .75),
    0 8px 60px rgba(10, 20, 36, .6);
}

@media (prefers-reduced-motion: reduce) {
  .sfondo-ambito, .sfondo-attivo { animation: none; transition: none; transform: none; }
}

/* ─── Copertina del ramo finanza ─────────────────────────────────────
   Una sola schermata: il titolo al centro e nient'altro. Niente
   occhiello, niente filetto, niente bottoni — da qui si naviga con
   la barra in alto.                                                */

.titolo-copertina {
  font-size: clamp(2.6rem, 8vw, 7rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: .005em;
  text-wrap: balance;
  max-width: 15ch;
  margin: 0 auto;
  color: #FFFFFF;
  /* l'ombra fa il lavoro che prima faceva il grassetto: tiene il
     testo leggibile senza ispessire le aste */
  text-shadow:
    0 1px 3px rgba(10, 20, 36, .8),
    0 4px 24px rgba(10, 20, 36, .9),
    0 10px 70px rgba(10, 20, 36, .8);

  /* Entra dopo: prima si guarda la fotografia, poi arriva la frase. */
  animation: comparsa 2.4s ease-out 1.6s both;
}

@keyframes comparsa {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .titolo-copertina { animation: none; }
}

/* ─── Testata delle pagine interne ──────────────────────────────── */

.testata-pagina {
  background: var(--inchiostro);
  padding-top: 11rem;
  padding-bottom: 4.5rem;
}

/* Il volo in ciclo al posto delle quattro scene. Resta sotto il velo
   e copre tutta la fascia come facevano le fotografie. */
.video-ambiti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}