/* ==========================================================================
   LA PAGINA: il design system Apple applicato alle sezioni del sito
   ==========================================================================
   Ordine dei blocchi, come la homepage e le pagine prodotto di Apple:
     apertura  nero      tile della homepage
     chi sono  bianco    sezione "articolo"
     progetti  nero      palco delle pagine "Pro"
     competenze alluminio galleria "highlights"
     squadra   bianco    griglia promo
     contatti  nero      chiusura
     footer    alluminio
   ========================================================================== */

/* ---------- Local nav ---------- */
.ln-contenuto {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1024px;
  height: var(--a-nav);
  margin-inline: auto;
  padding-inline: max(22px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-right));
}
.ln-nome {
  margin-right: auto;
  color: inherit;
  font-family: var(--a-font-display);
  font-size: 21px;
  line-height: 1.14286;
  font-weight: 600;
  letter-spacing: 0.011em;
  text-decoration: none;
  white-space: nowrap;
}
.ln-apri { display: none; }
.ln-menu {
  display: flex;
  align-items: center;
  gap: 24px;
}
.ln-voce {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: 12px;
  line-height: 1.33337;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--a-durata-colore) var(--a-curva), opacity var(--a-durata-colore) var(--a-curva);
}
.ln-voce:hover { color: var(--a-link); }
.a-nav-scura .ln-voce:hover { color: var(--a-link-su-nero); }
.ln-voce.attiva { color: var(--a-grigio-secondario); }   /* la voce "corrente": grigia come su apple.com */
.a-nav-scura .ln-voce.attiva { color: #a1a1a6; }
/* Apple usa l'opacita' 0,56; qui grigi pieni, che sul vetro chiaro restano
   sopra 4,5:1 anche a 12 px (con l'opacita' si scendeva a circa 4:1). */
.ln-voce .rail-num { display: none; }        /* Apple non numera le voci */
.ln-cta {
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--a-raggio-pillola);
  background: var(--a-blu);
  color: #ffffff;
  justify-content: center;
}
.ln-cta:hover, .a-nav-scura .ln-cta:hover { background: var(--a-blu-hover); color: #ffffff; }
.ln-cta.attiva, .a-nav-scura .ln-cta.attiva { color: #ffffff; }

.ln-lingua {
  display: flex;
  align-items: center;
  margin-left: 18px;
}
.btn-lang {
  min-width: 24px;
  min-height: 24px;
  padding: 2px 4px;
  border: 0;
  border-radius: var(--a-raggio-badge);
  background: transparent;
  color: inherit;
  font-family: var(--a-font);
  font-size: 12px;
  line-height: 1.33337;
  letter-spacing: -0.01em;
  color: var(--a-grigio-secondario);
  cursor: pointer;
  transition: color var(--a-durata-colore) var(--a-curva);
}
.a-nav-scura .btn-lang { color: #a1a1a6; }
.btn-lang:hover, .btn-lang.attiva,
.a-nav-scura .btn-lang:hover, .a-nav-scura .btn-lang.attiva { color: inherit; }
.ln .btn-lang.attiva { color: inherit; }
.btn-lang.attiva { font-weight: 600; }

/* La tenda: quando la tendina e' aperta, la pagina dietro si sfoca */
.ln-tenda {
  position: fixed;
  inset: 0;
  z-index: 9996;
  background: rgba(232, 232, 237, 0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--a-durata-colore) var(--a-curva), visibility 0s linear var(--a-durata-colore);
}
.ln.a-nav-scura + .ln-tenda { background: rgba(0, 0, 0, 0.48); }
.ln-tenda.aperta {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--a-durata-colore) var(--a-curva), visibility 0s;
}

@media (max-width: 834px) {
  .ln-contenuto {
    flex-wrap: wrap;
    height: auto;
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  }
  .ln-nome {
    display: flex;
    align-items: center;
    height: var(--a-nav);
    margin-right: 0;
    font-size: 19px;
    line-height: 1.21053;
    letter-spacing: 0.012em;
  }
  .ln-apri {
    display: grid;
    place-items: center;
    width: 32px;
    height: var(--a-nav);
    margin-right: auto;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  .ln-apri svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--a-durata-colore) var(--a-curva);
  }
  .ln.aperta .ln-apri svg { transform: rotate(180deg); }

  /* IT / EN a destra, lasciando il posto alla pillola */
  .ln-lingua { order: 2; margin: 0 84px 0 0; }

  /* La tendina: si apre in altezza, le voci entrano in dissolvenza */
  .ln-menu {
    order: 3;
    flex: 0 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height var(--a-durata-colore) var(--a-curva), visibility 0s linear var(--a-durata-colore);
  }
  .ln.aperta .ln-menu {
    max-height: 200px;
    padding-bottom: 12px;
    visibility: visible;
    transition: max-height var(--a-durata-colore) var(--a-curva), visibility 0s;
  }
  .ln-voce {
    min-height: 34px;
    padding-left: 16px;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: -0.016em;
    opacity: 0;
    transition: opacity var(--a-durata-menu) var(--a-curva), color var(--a-durata-colore) var(--a-curva);
  }
  .ln.aperta .ln-voce { opacity: 1; transition-delay: 0.08s; }

  /* La pillola resta nella barra anche a tendina chiusa */
  .ln-cta,
  .ln.aperta .ln-cta {
    position: absolute;
    top: 12px;
    right: max(16px, env(safe-area-inset-right));
    width: 72px;
    min-height: 0;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.33337;
    letter-spacing: -0.01em;
    opacity: 1;
    visibility: visible;
  }

  /* A tendina aperta il fondo diventa pieno, come su apple.com */
  .ln.aperta .a-nav-sfondo { background: #fafafc; }
  .ln.aperta.a-nav-scura .a-nav-sfondo { background: var(--a-nero-menu); }
}
@media (max-width: 359px) {
  /* Telefoni stretti (320 px): nome, freccia, IT/EN e pillola su una riga */
  .ln-nome { font-size: 17px; letter-spacing: -0.022em; }
  .ln-apri { width: 24px; }
  .ln-lingua { margin-right: 80px; }
}
@media (min-width: 835px) {
  .ln-tenda { display: none; }
}

/* ---------- Caricamento: la riga blu di Safari sotto la barra ---------- */
.caricamento {
  position: fixed;
  inset: var(--a-nav) 0 auto 0;
  z-index: 9998;
  height: 2px;
  pointer-events: none;
  transition: opacity 0.5s var(--a-curva) 0.2s;
}
.caricamento-barra { position: absolute; inset: 0; }
.caricamento-barra i {
  display: block;
  height: 100%;
  background: var(--a-blu);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--a-curva);
}
.caricamento.finito { opacity: 0; }

/* ---------- Apertura: la tile nera della homepage ---------- */
.ap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(var(--a-nav) + 692px);
  padding: calc(var(--a-nav) + 56px) 0 63px;
  overflow: hidden;
  text-align: center;
}
.ap-contenuto { width: var(--a-ampio); }
.ap-nome { margin: 0; color: var(--a-chiaro-su-nero); text-wrap: balance; }
.ap-nome span { display: inline-block; }
.ap-frase {
  margin: 10px auto 0;
  max-width: 30em;
  color: var(--a-chiaro-su-nero);
  text-wrap: balance;
}
.ap-frase b { font-weight: 600; }
.ap-azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}
@media (max-width: 1068px) {
  .ap { min-height: calc(var(--a-nav) + 600px); }
}
@media (max-width: 734px) {
  .ap { min-height: calc(var(--a-nav) + 500px); padding: calc(var(--a-nav) + 39px) 0 48px; }
  .ap-frase { margin-top: 8px; }
  .ap-azioni { gap: 12px; margin-top: 20px; }
}

/* ---------- Chi sono: sezione "articolo" ---------- */
.cs-griglia { display: grid; gap: 64px; }
.cs-titolo { margin: 0; text-wrap: balance; }
.cs-copy { max-width: 83.333%; margin-top: 40px; }
.cs-copy p { margin: 0; }
.cs-copy p + p { margin-top: 1em; }

/* Il ritratto: nascosto finche' c'e' solo il commento */
.cs-ritratto:empty { display: none; }
.ritratto-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--a-raggio-card);
}
@media (min-width: 1069px) {
  .cs-griglia:has(.cs-ritratto:not(:empty)) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    align-items: start;
  }
  .cs-griglia:has(.cs-ritratto:not(:empty)) .cs-copy { max-width: none; }
}

.cs-dati {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 80px;
  margin-bottom: 0;
}
.cs-riga { padding-top: 16px; border-top: 1px solid var(--a-grigio-filo); }
.cs-dati dt, .cs-dati dd { margin-inline: 0; }
@media (max-width: 734px) {
  .cs-copy { max-width: none; margin-top: 28px; }
  .cs-dati { grid-template-columns: 1fr; gap: 0; margin-top: 56px; }
  .cs-riga { padding-block: 16px; }
}

/* ---------- Progetti: il palco nero ---------- */
.pr-testa { margin-bottom: 64px; }
.pr-testa h2 { margin: 0; text-wrap: balance; }
.pr-lead { max-width: 816px; margin: 16px 0 0; color: var(--a-grigio-su-nero); }
#progetti .vetrine { width: var(--a-ampio); margin-inline: auto; }
@media (max-width: 734px) {
  .pr-testa { margin-bottom: 40px; }
  #progetti .vetrine { width: calc(100% - 24px); }
}

/* ---------- Competenze: la galleria "highlights" ---------- */
.ab-testa { margin-bottom: 48px; }
.ab-testa h2 { margin: 0; text-wrap: balance; }
.ab-lead { max-width: 816px; margin: 12px 0 0; color: var(--a-grigio-secondario); }
.ab-galleria {
  grid-auto-columns: 400px;
  align-items: stretch;
  padding-block: 4px;           /* posto per l'anello del fuoco delle card */
}
.ab-card {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  padding: 30px;
  scroll-margin-top: calc(var(--a-nav) + 24px);
}
.ab-icona {
  width: 40px;
  height: 40px;
  margin-bottom: 24px;
  fill: none;
  stroke: var(--ab-icona, currentColor);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ab-card h3 { margin: 0; text-wrap: balance; }
.ab-testo {
  margin: 12px 0 0;
  color: var(--a-grigio-secondario);
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: -0.022em;
}
.ab-testo strong { font-weight: 600; color: var(--a-inchiostro); }
.ab-card.a-card-scura .ab-testo { color: var(--a-grigio-su-nero); }
.ab-card.a-card-scura .ab-testo strong { color: var(--a-chiaro-su-nero); }
.ab-link {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 28px;
}
.a-paddle-riga[hidden] { display: none; }
@media (max-width: 1068px) {
  .ab-galleria { grid-auto-columns: 344px; }
}
@media (max-width: 734px) {
  .ab-testa { margin-bottom: 32px; }
  .ab-galleria { grid-auto-columns: calc(100% - 40px); }
  .ab-card { min-height: 0; padding: 28px 24px; }
  .a-paddle-riga { margin-top: 32px; }
}

/* ---------- Squadra: la griglia promo ---------- */
.sq-testa { margin-bottom: 48px; }
.sq-testa h2 { margin: 0; text-wrap: balance; }
.sq-lead { max-width: 816px; margin: 12px 0 0; color: var(--a-grigio-secondario); }
.sq-lead strong { font-weight: 600; color: var(--a-inchiostro); }
.sq-griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.collega { display: flex; flex-direction: column; }
.collega-studio { grid-column: 1 / -1; flex-direction: row; }
.sq-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 40px;
}
/* #squadra davanti: in isole.css, sotto i 900 px, c'e' una regola copiata
   identica (.collega-studio .collega-corpo { padding: var(--u3) }) che usa
   una variabile delle isole e qui varrebbe zero. Questa la batte. */
#squadra .collega-studio .sq-corpo { flex: 1 1 0; justify-content: center; padding: 56px 48px; }
.collega-nome { display: flex; flex-direction: column; gap: 4px; }
.collega-nome h3 { margin: 0; }
.collega-ruolo {
  margin: 0;
  color: var(--a-grigio-secondario);
  font-size: 17px;
  line-height: 1.23536;
  letter-spacing: -0.022em;
}
.sq-testo { margin: 0; font-size: 17px; line-height: 1.47059; letter-spacing: -0.022em; }
.sq-testo strong { font-weight: 600; }
.collega-link { align-self: flex-start; margin-top: auto; padding-top: 8px; }
@media (max-width: 900px) {
  #squadra .collega-studio .sq-corpo { flex: none; padding: 40px; }
}
@media (max-width: 734px) {
  .sq-testa { margin-bottom: 32px; }
  .sq-griglia { grid-template-columns: 1fr; gap: 16px; }
  #squadra .sq-corpo, #squadra .collega-studio .sq-corpo { padding: 28px 24px 32px; }
}

/* ---------- Contatti: la chiusura ---------- */
.ct-contenuto { text-align: center; }
.ct-contenuto h2 { margin: 0 auto; max-width: 14em; text-wrap: balance; }
.ct-lead { max-width: 34em; margin: 16px auto 0; color: var(--a-grigio-su-nero); text-wrap: balance; }
.ct-palco { margin-top: 48px; }
.ct-email {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 32px 44px;
  border: 0;
  background: var(--a-nero-superficie);
  color: var(--a-chiaro-su-nero);
  font-family: var(--a-font);
  cursor: pointer;
}
.ct-email:hover { background: var(--a-nero-superficie-2); }
.ct-testo {
  font-family: var(--a-font-display);
  font-size: 32px;
  line-height: 1.125;
  font-weight: 600;
  letter-spacing: 0.004em;
  overflow-wrap: anywhere;
}
.email-azione {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--a-link-su-nero);
  font-size: 17px;
  line-height: 1.23536;
  letter-spacing: -0.022em;
  transition: color var(--a-durata-colore) var(--a-curva);
}
.email-azione svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.ct-email:hover #btn-copia-testo { text-decoration: underline; text-underline-offset: 0.12em; }
.ct-email.copiata .email-azione { color: #30d158; }
.ct-canali {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}
@media (max-width: 734px) {
  .ct-palco { margin-top: 36px; }
  .ct-email { width: 100%; padding: 26px 20px; }
  /* 31 caratteri su una riga sola: la misura segue la larghezza della card
     (87,5% dello schermo meno i 40 px di padding; l'indirizzo e' ~19 em). */
  .ct-testo { font-size: min(21px, calc((87.5vw - 40px) / 19)); line-height: 1.2; white-space: nowrap; overflow-wrap: normal; }
  .ct-canali { gap: 12px; margin-top: 32px; }
}

/* ---------- Footer ---------- */
.piede-riga {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 20px 21px;
}
@media (max-width: 734px) {
  .piede-riga { flex-direction: column; padding-inline: 0; width: var(--a-ampio); }
}

/* ---------- Movimento ---------- */

/* Rivelazioni del testo: una volta sola, a tempo, come le intro Apple.
   Le arma movimento.js; senza JavaScript la pagina e' gia' tutta visibile. */
.a-armata { opacity: 0; translate: 0 32px; }
.a-armata.a-dentro {
  opacity: 1;
  translate: 0 0;
  transition: opacity 1s var(--a-curva-contenuto), translate 1s var(--a-curva-contenuto);
  transition-delay: var(--a-ritardo, 0s);
}

@media (prefers-reduced-motion: no-preference) {
  /* L'apertura entra al caricamento */
  .ap-nome, .ap-frase, .ap-azioni { animation: a-entra 1.1s var(--a-curva-contenuto) both; }
  .ap-frase { animation-delay: 0.15s; }
  .ap-azioni { animation-delay: 0.3s; }

  @supports (animation-timeline: view()) {
    /* Il contenuto dell'apertura sale e svanisce mentre esce */
    .ap-contenuto {
      animation: a-svanisce linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    /* Le card dei progetti crescono entrando, come le scene "media hero".
       Si anima `scale`, non `transform`: il sollevamento al passaggio del
       mouse, che e' delle card, resta loro. */
    #progetti .vetrine .rivela-armata { opacity: 1; }
    #progetti .vetrine .card-progetto-grande {
      animation: a-cresce linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}
body.leggero #progetti .vetrine .card-progetto-grande { animation: none; }
body.leggero .ap-contenuto { animation: none; }