/* ========================================================================
   AZIENDE.CSS
   Stili esclusivi della pagina Aziende (aziende.html)
======================================================================= */

#corporate {
  padding: calc(var(--nav-h) + var(--section-pad)) 0 var(--section-pad);
  background: var(--navy);
  position: relative;
  overflow: visible;
}

.corporate-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 2;
}

/* La vetrata dietro l'apertura: si intuisce, non si guarda. Sta solo sugli
   schermi larghi — sul telefono il file non viene nemmeno scaricato, perche
   una foto di sfondo li vale meno dei secondi che costa. Sfocata e scurita
   perche sopra ci va il testo bianco. */
@media (min-width: 961px) {
  .corporate-foto {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("/assets/img/aziende-vetrata.jpg");
    background-size: cover;
    background-position: 78% center;
    opacity: 0.34;
    filter: blur(0.6px) saturate(0.7);
  }

  /* Il velo blu: pieno a sinistra, dove c'e il titolo; piu leggero a destra,
     dove la foto puo respirare dietro il riquadro delle domande. */
  .corporate-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      var(--navy) 12%,
      rgba(15, 36, 64, 0.8) 52%,
      rgba(15, 36, 64, 0.55) 100%
    );
  }
}

.corporate-bg-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 70% at 90% 50%,
    rgba(201, 169, 110, 0.07) 0%,
    transparent 60%
  );
}

/* Chi sono, subito sotto l'apertura: chi arriva qui da una ricerca non passa
   dalla home, e deve sapere con chi sta parlando e che struttura ha dietro. */
.corporate-chi {
  margin-top: 34px;
  padding-left: 22px;
  border-left: 1px solid rgba(201, 169, 110, 0.35);
}

.corporate-chi-titolo {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.corporate-chi p {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.74);
}

/* Il dato che dice "non sono al primo giro": una riga sola, discreta. */
.corporate-chi-numeri {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.corporate-chi strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}

.corporate-panel {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  align-self: start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 48px;
}

.corporate-panel-title {
  margin-bottom: 28px;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.40;
  font-style: italic;
}

.corporate-scenarios {
  display: flex;
  flex-direction: column;
}

.corporate-scenario {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.corporate-scenario-text {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.65;
}

.corporate-scenario-text strong {
  color: rgba(255, 255, 255, 0.90);
  font-weight: 400;
}

.corporate-cta {
  margin-top: 36px;
}

@media (max-width: 960px) {
  .corporate-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .corporate-panel {
    position: static;
  }
}

@media (max-width: 480px) {
  .corporate-panel {
    padding: 28px 20px;
  }

  .corporate-panel-title {
    font-size: 1rem;
  }
}


/* -----------------------------
   Le quattro situazioni
   Stessa impaginazione dei tre casi della home: numero, situazione, e in
   fondo cosa cambia. Qui il testo e piu lungo, quindi stanno in colonna
   unica su tutta la larghezza invece che a fianco del titolo.
----------------------------- */
#casi-impresa {
  padding: var(--section-pad) 0;
  background: var(--white);
}

#casi-impresa .section-eyebrow span {
  color: var(--gold-deep);
}

.casi-impresa-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.casi-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 46px;
}

.casi-lead {
  padding-top: 74px;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: var(--text-mid);
  line-height: 1.85;
}

/* Due a due: in fila per quattro le colonne diventano strette e le schede
   crescono in altezza piu di quanto si guadagni. */
.casi-lista {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 56px;
}

.caso {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(201, 169, 110, 0.55);
}

.caso-num {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--gold-deep);
  line-height: 1.4;
}

.caso-titolo {
  margin-bottom: 10px;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}

.caso-testo {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  color: var(--text-mid);
  line-height: 1.7;
}

.caso-testo strong {
  color: var(--navy);
  font-weight: 400;
}

/* Cosa cambia: staccato dal racconto, come l'esito dei casi della home. */
.caso-esito {
  margin-top: 12px;
  padding-left: 16px;
  border-left: 1px solid rgba(201, 169, 110, 0.55);
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--gold-deep);
  line-height: 1.65;
}

@media (max-width: 960px) {
  .casi-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .casi-header .gold-rule {
    margin-bottom: 0;
  }

  .casi-lead {
    padding-top: 0;
  }

  .casi-lista {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* ==========================================================================
   LE SCHERMATE CHE SI SOVRAPPONGONO
   Come sulla home: ogni sezione resta ferma sotto quella dopo, che le
   scivola sopra come il foglio di un calendario. Acceso solo su schermi
   larghi e non bassi; se una sezione e piu alta dello schermo,
   "schermate.js" le toglie l'effetto e la fa scorrere, cosi non si taglia
   mai una riga di testo.
========================================================================== */

@media (min-width: 961px) and (min-height: 730px) {
  #corporate,
  #casi-impresa,
  #advisory {
    position: sticky;
    top: 0;
    box-sizing: border-box;
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding: var(--nav-h) 0 var(--schermata-sotto);
  }

  /* Il bordo del foglio che arriva, perche si veda che copre il precedente. */
  #casi-impresa,
  #advisory,
  #contatti {
    box-shadow: 0 -22px 44px rgba(11, 22, 40, 0.16);
  }

  /* Stacchi interni piu stretti, per far restare ferme anche le quattro
     situazioni: si guadagnano una trentina di pixel senza toccare i testi. */
  #casi-impresa .casi-header {
    margin-bottom: 26px;
  }

  #casi-impresa .caso-testo {
    line-height: 1.62;
  }

  #casi-impresa .caso-esito {
    line-height: 1.55;
    margin-top: 8px;
  }

  #casi-impresa .casi-lista {
    gap: 24px 56px;
  }

  #casi-impresa .caso-esito {
    margin-top: 10px;
  }

  /* La valvola di sfogo: sezione piu alta dello schermo, torna a scorrere. */
  #corporate.sezione-libera,
  #casi-impresa.sezione-libera,
  #advisory.sezione-libera {
    position: relative;
    display: block;
    min-height: 0;
    padding: calc(var(--nav-h) + 40px) 0 72px;
  }

  /* Il riquadro delle tre domande non si muove piu da solo: ora e la
     sezione intera a restare ferma. */
  #corporate:not(.sezione-libera) .corporate-panel {
    position: static;
  }
}


/* -----------------------------
   Corporate advisory
   Le tre fasi di vita dell'impresa in fila: start up, sviluppo, uscita.
   Fondo blu come l'apertura, cosi la pagina alterna scuro e chiaro.
----------------------------- */
#advisory {
  padding: var(--section-pad) 0;
  background: var(--navy);
  position: relative;
}

#advisory .section-eyebrow span {
  color: var(--gold);
}

.advisory-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  position: relative;
  z-index: 2;
}

.advisory-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 32px;
}

.advisory-lead {
  padding-top: 74px;
}

/* Quello che la struttura offre oltre alle tre fasi: una riga sola sotto,
   perche non sono un quarto passaggio ma cose che ci sono sempre. */
.advisory-inoltre {
  margin-top: 26px;
  font-family: var(--font-ui);
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.advisory-inoltre strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}

/* Le tre fasi, una accanto all'altra: si leggono da sinistra a destra come
   la vita dell'impresa. La riga d'oro sopra ognuna e' lo stesso segno delle
   quattro situazioni qui sopra. */
.advisory-fasi {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.fase {
  padding-top: 20px;
  border-top: 1px solid rgba(201, 169, 110, 0.55);
}

.fase-icona {
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  color: var(--gold);
}

.fase-icona svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fase-titolo {
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.fase-riga {
  margin-bottom: 16px;
  font-family: var(--font-ui);
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}

.fase-servizi {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fase-servizi li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-ui);
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

/* Una spunta al posto del pallino, come nelle schede della banca. */
.fase-servizi li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 4px;
  border-left: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(-45deg);
}

/* In fondo, sulla stessa riga: la nota della banca a sinistra e il rimando
   alla parte personale a destra. Affiancate non costano altezza. */
.advisory-chiusura {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 40px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* La riga che dice da dove arrivano questi servizi: e' la stessa nota che
   la banca mette sulle proprie schede, e qui serve per lo stesso motivo. */
.advisory-nota {
  flex: 1 1 420px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.48);
}

/* Chi legge questa pagina ha anche un patrimonio suo: da qui ci si torna. */
.advisory-ritorno {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 0.96rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.advisory-ritorno-cta {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.advisory-ritorno:hover .advisory-ritorno-cta {
  color: var(--gold-light);
}

@media (max-width: 960px) {
  .advisory-header {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .advisory-header .gold-rule {
    margin-bottom: 0;
  }

  .advisory-lead {
    padding-top: 0;
  }

  .advisory-fasi {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}