/* ==========================================================================
   SUNPRIME — Landing "Valorizza il tuo terreno agricolo"
   Stesso design system del sito (base + components). Qui solo le sezioni
   specifiche della landing, con il linguaggio della hero Figma.
   ========================================================================== */

/* Utility condivise (ridichiarate qui: la landing non carica chisiamo.css) */
/* .lead ha colore scuro esplicito in base.css: su sfondo blu va schiarito */
.section-intro { max-width: 62ch; margin-top: var(--space-xs); }
.section-intro.is-display {
  max-width: 46ch;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.35;
}
/* .section-cta e' in components.css: la CTA di chiusura sta a destra. */

/* ---------- Hero (media full-bleed + linea divisoria + titolo/sx testo/dx) ---------- */
/* L'apertura fotografica occupa lo schermo intero e resta appiccicata in alto
   mentre la sezione successiva le sale sopra: e' il meccanismo di Chi siamo e
   della home, e non c'e' ragione perche' due aperture della stessa famiglia si
   comportino in modo diverso.

   Lo scorrimento e' position: sticky, non JavaScript: l'apertura e' incollata
   in cima dentro un contenitore che finisce dopo la lastra successiva, quindi
   si stacca da sola quando quel contenitore e' passato. */
.cover-hero { position: relative; }
.page-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  color: var(--c-white);
  overflow: hidden;
  /* L'header e' fisso e galleggia sopra: senza questo margine l'occhiello
     dell'apertura ci finisce sotto appena il titolo occupa piu' di due righe. */
  padding-top: calc(var(--ingombro-header) + var(--space-lg));
}
/* La lastra che sale: raggio in alto e un livello sopra l'apertura. */
.cover-hero > .section-blue,
.cover-hero > .section-dark {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,13,51,0.30) 0%, rgba(0,13,51,0.26) 42%, rgba(0,13,51,0.88) 100%);
}
.page-hero-content { position: relative; z-index: 2; padding-bottom: clamp(40px, 4.7vw, 90px); width: 100%; }
.page-hero-content .eyebrow.on-dark { display: block; margin-bottom: 20px; }
/* L'ingresso e' quello di Chi siamo: il filetto arriva da sinistra, poi
   salgono l'occhiello, il titolo e il testo. Era un'animazione di quella
   pagina sola; e' la stessa apertura, quindi e' la stessa entrata. */
.page-hero-rule {
  width: 100%; height: 2px;
  background: var(--c-white);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: hero-linea 1s cubic-bezier(.22, 1, .36, 1) .25s forwards;
}
@keyframes hero-linea { to { transform: scaleX(1); } }

.page-hero-content .eyebrow,
.page-hero-row .h1,
.page-hero-col-right {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-sale .9s cubic-bezier(.22, 1, .36, 1) .5s forwards;
}
.page-hero-content .eyebrow { animation-delay: .38s; }
.page-hero-col-right { animation-delay: .62s; }
@keyframes hero-sale { to { opacity: 1; transform: none; } }

/* Chi ha chiesto meno movimento vede la pagina gia' aperta, non un'apertura
   piu' lenta. */
@media (prefers-reduced-motion: reduce) {
  .page-hero-rule { transform: none; animation: none; }
  .page-hero-content .eyebrow,
  .page-hero-row .h1,
  .page-hero-col-right { opacity: 1; transform: none; animation: none; }
}

/* Le proporzioni dell'apertura sono quelle del Figma di Chi siamo, misurate
   sul canvas 1920: titolo al 42,4% della larghezza in --fs-44, testo al 49,3%
   in --fs-28, allineati in alto sotto il filetto. Prima il titolo di una
   pagina Soluzione arrivava a 88px su tre righe e schiacciava la colonna
   destra a 40 caratteri: due aperture della stessa famiglia non sembravano
   parenti. Ora ce n'e' una sola, e vale per tutto il sito. */
.page-hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 2.8vw, 54px);
  padding-top: clamp(20px, 1.7vw, 32px);
}
.page-hero-row .h1 {
  flex: 0 0 auto;
  width: min(100%, 42.4%);
  max-width: none;
  font-size: var(--fs-44);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
  text-wrap: balance;
}
.page-hero-col-right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 1.7vw, 28px);
  max-width: 49.3%;
  margin-left: auto;
}
.page-hero-col-right .lead {
  font-size: var(--fs-28);
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: none;
}
@media (max-width: 860px) {
  .page-hero-row { flex-direction: column; }
  .page-hero-row .h1, .page-hero-col-right { width: 100%; max-width: none; margin-left: 0; }
}

/* Stessa scala per la testata navy, che e' la stessa apertura senza fotografia */
.testata-row .h1 {
  max-width: none;
  font-size: var(--fs-44);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.testata-row .lead { font-size: var(--fs-28); line-height: 1.5; letter-spacing: -0.01em; }
.page-hero-row .lead.on-dark { color: rgba(255,255,255,0.92); margin: 0; }
@media (max-width: 900px) {
  .page-hero { min-height: 560px; }
  .page-hero-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .page-hero-row .h1 { max-width: none; }
  .page-hero-col-right { max-width: none; }
}

/* ---------- Blocchi beneficio (icona + titolo + testo) ---------- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  margin-top: var(--space-3xl);
}
@media (max-width: 860px) { .benefit-grid { grid-template-columns: 1fr; gap: var(--space-xl); } }
.benefit { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.benefit .ico {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(var(--c-blue-rgb), 0.08);
  color: var(--c-blue);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.benefit h3 { font-size: 20px; }
.benefit p { font-size: 16px; color: var(--c-ink-soft); line-height: 1.55; }

/* Intro centrata delle sezioni marketing */
.section-lead-center { max-width: 60ch; margin: var(--space-md) auto 0; text-align: center; }
.section-head-center { text-align: center; }
.section-head-center .eyebrow { display: block; }

/* ---------- "A chi ci rivolgiamo" (blu, immagine + requisiti) ---------- */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: var(--space-2xl);
}
@media (max-width: 900px) { .audience-grid { grid-template-columns: 1fr; gap: 32px; } }
.audience-media { margin: 0; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/3; }
.audience-media img { width: 100%; height: 100%; object-fit: cover; }
/* La colonna dei requisiti era minuta: etichetta da 13px, testo da 15,5 e
   nessuno stacco fra un blocco e l'altro. Accanto a una fotografia alta 500px
   sembrava una nota a pie' di pagina, non meta' della sezione. */
.audience-body { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(28px, 2.6vw, 44px); }
.audience-body .h3 { max-width: 22ch; }
.req-block { width: 100%; }
/* La CTA di chiusura deve poter usare tutta la colonna: .audience-body
   allinea a sinistra i suoi figli, e un section-cta largo quanto il pulsante
   non ha una destra verso cui spingerlo. */
.audience-body > .section-cta { align-self: stretch; margin-top: clamp(8px, 1vw, 20px); }
/* Fra l'introduzione del blocco e l'elenco che la specifica ci vuole uno
   stacco: il filetto della prima voce, appoggiato al paragrafo, sembrava una
   sottolineatura invece dell'inizio di un elenco. */
.req-block p + .req-list { margin-top: clamp(18px, 1.6vw, 28px); }
.req-block p { font-size: clamp(15px, 1.1vw, 17.5px); line-height: 1.6; color: var(--c-white-soft); }
.req-title {
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--c-white);
  font-family: var(--font-display);
}
.req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(14px, 1.1vw, 18px); width: 100%; }
.req-list li {
  position: relative;
  padding-left: 32px;
  font-size: clamp(15px, 1.1vw, 17.5px);
  line-height: 1.6;
  color: var(--c-white);
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: clamp(14px, 1.1vw, 18px);
}
.req-list li:first-child { border-top: 0; padding-top: 0; }
/* Revisione 21/09: il pallino era un disco pieno di 16px in lime, e in un
   elenco di cinque voci faceva piu' rumore del testo che doveva introdurre —
   cinque macchie gialle che si leggevano prima delle parole.
   Ora e' un anello sottile: stessa posizione, stesso colore di marca, ma il
   giallo resta un contorno invece di una superficie. Il segno si vede, non si
   impone, e il peso visivo torna alla riga di testo.
   Il diametro scende da 16 a 10px; il mezzo diametro nel calcolo dell'allineamento
   scende di conseguenza da 8 a 5px. */
.req-list li::before {
  content: "";
  position: absolute;
  /* Il pallino si allinea alla prima riga del testo, non a una misura fissa:
     corpo e spaziatura sono in clamp() e cambiano con la finestra. */
  left: 3px; top: calc(clamp(14px, 1.1vw, 18px) + 0.8em - 5px);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--c-lime);
}
/* La prima voce non ha filetto ne' spazio sopra: il pallino risale di altrettanto. */
.req-list li:first-child::before { top: calc(0.8em - 5px); }

/* ---------- "Come funziona" (4 step con linea di connessione) ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: var(--space-3xl);
  background: var(--c-line);
}
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr; } }
.step-item {
  background: var(--c-surface-alt);
  padding: 28px 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.step-item .step-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.step-item .step-label { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.3; }
.step-item p { font-size: 14px; color: var(--c-ink-soft); line-height: 1.55; }
.step-item .step-bar { width: 34px; height: 3px; background: var(--c-lime); margin-bottom: 4px; }

/* ---------- Sezione azienda (heading+immagine / paragrafi) ---------- */
.company-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: var(--space-lg);
}
@media (max-width: 900px) { .company-grid { grid-template-columns: 1fr; gap: 32px; } }
.company-left { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.company-left .h2 { max-width: 16ch; }
.company-media { margin: 0; width: 100%; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 3/2; }
.company-media img { width: 100%; height: 100%; object-fit: cover; }
.company-copy { display: flex; flex-direction: column; gap: 18px; }
.company-copy p { font-size: 16px; color: var(--c-ink-soft); line-height: 1.62; max-width: 64ch; }

/* ---------- Progetti (blu, card scure) ---------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: var(--space-2xl);
}
@media (max-width: 1000px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .projects-grid { grid-template-columns: 1fr; } }
.proj-card {
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-navy);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
}
.proj-card .thumb { aspect-ratio: 16/11; overflow: hidden; }
.proj-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.proj-card:hover .thumb img { transform: scale(1.05); }
.proj-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

/* Il titolo della scheda e' il comune, non il codice di commessa. Prima era
   il contrario: la riga piu' grande diceva «P-000725 / P-000654», che non
   significa niente per chi visita e tutto per chi lavora in azienda. Il
   codice resta — serve a chi telefona citandolo — ma come metadato. */
.proj-card .p-titolo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
.proj-card .p-codice {
  font-family: var(--font-display);
  font-variation-settings: "MONO" 100;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}
.proj-card .p-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 2px; }
.proj-card .p-meta .k { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,0.55); }
.proj-card .p-meta .v { font-size: 15px; font-weight: 600; }
.proj-card .desc { font-size: 14.5px; color: var(--c-white-soft); line-height: 1.5; }
/* La scheda e' un collegamento intero, non un riquadro con dentro un link:
   il bersaglio e' tutta la superficie, che su telefono e' l'unica misura che
   conta davvero. */
a.proj-card { text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
@media (hover: hover) {
  a.proj-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
  a.proj-card:hover .p-link { color: var(--c-white); }
}
a.proj-card:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  a.proj-card, a.proj-card:hover { transition: none; transform: none; }
}

.proj-card .p-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-lime);
  padding-block: 8px;
}
.proj-card .p-link svg { width: 16px; height: 16px; }

/* ==========================================================================
   AMPLIFY — resa più decisa e distintamente Sunprime (register: brand)
   scala estrema · numeri grandi · blocchi di colore · accento lime
   ========================================================================== */

/* Logo nella hero (header rimosso: è una landing) */
.hero-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding-top: 30px; }
.hero-topbar .brand { color: var(--c-white); display: inline-flex; align-items: center; }
.hero-topbar .brand-logo { height: 28px; width: auto; display: block; color: inherit; }
@media (max-width: 900px) { .hero-topbar { padding-top: 22px; } }

/* Il titolo dell'apertura ha una scala sola, quella del Figma di Chi siamo:
   la vedi sopra, in .page-hero-row .h1. La regola «piu' drammatica» che stava
   qui portava il titolo a 88px su tre righe e schiacciava la colonna destra,
   e vinceva per ordine nel foglio senza che si vedesse dall'alto. */

/* Occhiello con tacca lime — accento brand ripetuto su tutta la pagina */
.eyebrow { display: inline-flex; align-items: center; }
/* La tacca segue il colore del testo invece di essere lime fissa: blu sul
   chiaro, bianca sullo scuro. Una riga sola al posto di due, e non c'e' piu'
   modo che testo e tacca vadano fuori passo. */
.eyebrow::before {
  content: "";
  width: 24px; height: 3px;
  background: currentColor;
  margin-right: 12px;
  flex: none;
}

/* Titoli di sezione più grandi e tirati (bolder, non timidi) */
main .wrap > .h2 { font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -0.02em; text-wrap: balance; max-width: 20ch; }

/* Benefici: schede vere, non tre colonne di testo con un filetto sopra.
   Hanno il trattamento delle card della catena del valore di Chi siamo nella
   versione di settembre: filo blu da 2px, raggio 20, fondo trasparente, icona
   blu; al passaggio del mouse il blu sale dal basso e testo e icona passano
   al bianco. Niente sollevamento e niente ombra, come nella catena. */
.benefit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  color: var(--c-ink);
  border: 2px solid var(--c-blue);
  border-radius: var(--radius-card);
  padding: clamp(22px, 1.9vw, 34px) clamp(22px, 1.9vw, 34px) clamp(26px, 2.2vw, 40px);
  gap: clamp(12px, 1vw, 18px);
}
.benefit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-blue);
  transform: translateY(101%);
  transition: transform var(--durata-riempimento) var(--ease-morbido);
}
.benefit h3 { font-size: clamp(18px, 1.35vw, 23px); letter-spacing: -0.01em; line-height: 1.25; transition: color .5s var(--ease); }
.benefit p { color: var(--c-ink-soft); transition: color .5s var(--ease); }
.benefit .ico-catena { transition: background-color .5s var(--ease); }
.benefit .ico { transition: background-color .5s var(--ease), color .5s var(--ease); }
.section-dark .benefit,
.section-dark .benefit h3 { color: var(--c-white); }
.section-dark .benefit p { color: var(--c-white-soft); }
@media (hover: hover) {
  .benefit:hover::before { transform: translateY(0); }
  .benefit:hover, .benefit:hover h3, .benefit:hover p { color: var(--c-white); }
  .benefit:hover .ico-catena { background-color: var(--c-white); }
  .benefit:hover .ico { background: rgba(255, 255, 255, 0.16); color: var(--c-white); }
}
@media (prefers-reduced-motion: reduce) {
  .benefit::before, .benefit h3, .benefit p, .benefit .ico-catena, .benefit .ico { transition: none; }
}

/* "Come funziona": i passaggi sono card a filo blu come quelle della catena
   del valore — numero in mono blu in alto, etichetta in mono maiuscolo — e
   non piu' celle navy separate da un filetto con il numero lime grande. */
.steps-grid {
  gap: clamp(10px, 1.09vw, 21px);
  background: none;
}
.step-item,
.section-dark .step-item {
  background: transparent;
  border: 2px solid var(--c-blue);
  border-radius: var(--radius-card);
  padding: clamp(20px, 1.46vw, 28px);
}
.section-dark .step-item p { color: var(--c-white-soft); }
.section-dark .step-item .step-label { color: var(--c-white); }
.step-item .step-n {
  font-family: var(--font-body);
  font-weight: 500;
  font-variation-settings: "MONO" 100, "wght" 500;
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-blue);
  margin-bottom: clamp(18px, 2.4vw, 46px);
}
@media (max-width: 900px) {
  /* In colonna i passaggi sono gia' in fila: il grande stacco sotto il numero
     serviva a riempire la card quadrata del desktop. */
  .step-item .step-n { margin-bottom: 4px; }
}
.step-item .step-label {
  font-weight: 500;
  font-variation-settings: "MONO" 100, "wght" 500;
  letter-spacing: 0;
}

/* Banda numeri azienda — il tratto-firma "Numeri" di Sunprime */
/* .company-stats non esiste piu': una griglia a cinque colonne fisse dentro
   una colonna stretta schiacciava ogni etichetta su tre righe. Al suo posto
   .numeri-riga, che e' la stessa riga di cifre usata su tutto il sito. */

/* CTA banner di chiusura (navy) */
.lp-cta { background: var(--c-navy); color: var(--c-white); }
.lp-cta-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lp-cta .eyebrow { color: var(--c-white); }
.lp-cta .h2 { max-width: 18ch; }
.lp-cta .lead.on-dark { color: var(--c-white-soft); max-width: 50ch; }
.lp-cta .btn { margin-top: var(--space-2xs); }

/* ---------- Testata navy delle Soluzioni ----------
   BESS e Comunita' Energetiche non sono superfici e non hanno una fotografia:
   la loro apertura e' una lastra navy. Le classi c'erano nel markup e non nel
   foglio — il risultato era un titolo, un pulsante e un numero impilati senza
   respiro, con la cifra blu illeggibile sul navy. */
.testata-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.testata-row:has(.testata-figura) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .testata-row:has(.testata-figura) { grid-template-columns: minmax(0, 1fr); }
}
.testata-row > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
.testata-row .h1 { max-width: 20ch; text-wrap: balance; }
.testata-row .lead { margin-top: clamp(18px, 1.6vw, 26px); max-width: 60ch; }
.testata-row .btn { margin-top: clamp(26px, 2.4vw, 38px); }
/* Due pulsanti che chiudono insieme una sezione: vanno a destra come uno solo,
   e a capo sotto i 520px invece di stringersi. */
.cta-coppia { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
/* Da telefono i due pulsanti si impilano a tutta larghezza: allineati a
   destra con larghezze diverse sembravano sfalsati (revisione mobile 14/09). */
@media (max-width: 520px) {
  .cta-coppia { flex-direction: column; align-items: stretch; }
  .cta-coppia .btn { justify-content: center; }
}

/* Dentro .cta-coppia il margine va al gruppo, non a ciascun pulsante: quando
   sul telefono i due si impilano, il secondo ereditava un margine da hero. */
.testata-row .cta-coppia .btn { margin-top: 0; }
.testata-row .pill-badge { margin-bottom: 20px; }

.testata-figura { margin: 0; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/3; }
.testata-figura img { width: 100%; height: 100%; object-fit: cover; }

/* I numeri dell'apertura: sempre su fondo scuro, quindi sempre .on-dark —
   il blu di .stat-callout .num sul navy sta sotto 3:1. */
.hero-numeri {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(34px, 3.2vw, 56px);
}
.hero-numeri .stat-callout .num { font-size: clamp(32px, 3.4vw, 52px); line-height: 1.05; }
.hero-numeri .stat-callout .label { margin-top: 8px; }

/* Il rimando alla soluzione vicina — chiude la lastra dei progetti.
   Non aveva una riga di CSS: due testate di fila, margini di default del
   browser, distanze a caso. Qui e' un riquadro staccato da una linea, con il
   testo a sinistra e il pulsante a destra: si legge come un rimando e non
   compete con la testata della sezione. */
.correlata {
  margin-top: clamp(56px, 6vw, 112px);
  padding-top: clamp(28px, 3vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  display: grid;
  gap: clamp(20px, 2vw, 40px);
  align-items: end;
}
/* Occhiello, titolo e testo con lo stesso passo: l'occhiello e' un <span>
   inline, e un margine sul titolo non basterebbe a staccarlo. */
.correlata-testo { display: grid; justify-items: start; gap: clamp(12px, 1.1vw, 18px); }
.correlata-testo p { margin-top: 0; max-width: 58ch; color: var(--c-white-soft); }
.correlata-cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  .correlata { grid-template-columns: minmax(0, 1fr) auto; }
  .correlata-cta { justify-content: flex-end; }
}

/* ---------- Indice Soluzioni: una fascia per soluzione ----------
   Revisione 21/09. Prima erano cinque card in una griglia: la pagina stava in
   uno schermo e mezzo, e il cuore del sito si leggeva come un elenco di
   anteprime. Ora ogni soluzione ha la sua fascia a tutta larghezza.

   L'alternanza non e' decorativa: il fondo cambia a ogni sezione e la
   fotografia passa da destra a sinistra, cosi' scorrendo si percepisce il
   confine fra una soluzione e l'altra senza doverlo leggere. */
.sol-sezione {
  padding-block: clamp(56px, 6.2vw, 120px);
  overflow: hidden;
}
.sol-riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 76px);
  align-items: center;
}
/* La fotografia scambia lato a sezioni alterne. Si sposta con l'ordine della
   griglia e non con direction: cosi' l'ordine di lettura per chi usa uno
   screen reader resta testo prima, immagine dopo, sempre.

   La classe la mette il markup e non :nth-of-type, che qui conterebbe anche la
   testata della pagina: la prima soluzione sarebbe la seconda <section> della
   pagina e partirebbe gia' invertita. */
.sol-invertita .sol-testo { order: 2; }
.sol-invertita .sol-media { order: 1; }

.sol-testo { color: var(--c-white); }
/* Il numero e' un riferimento, non un titolo: sta dietro all'occhiello e non
   viene letto ad alta voce (aria-hidden nel markup). */
.sol-numero {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 74px);
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.28);
  margin: 0 0 clamp(8px, 0.8vw, 14px);
}
.sol-sezione .eyebrow { color: var(--c-white); margin-bottom: clamp(10px, 1vw, 18px); }
.sol-titolo {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.9vw, 52px);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 clamp(14px, 1.3vw, 24px);
  max-width: 20ch;
}
.sol-sezione .lead { margin: 0 0 clamp(18px, 1.7vw, 30px); max-width: 52ch; }

/* I requisiti: lo stesso segno dell'elenco .req-list, l'anello sottile.
   Ripeterlo qui invece di riusare .req-list e' voluto: li' le voci hanno un
   filetto di separazione fra loro, qui sarebbero tre righe sottolineate in
   mezzo a un blocco di testo. */
.sol-punti {
  list-style: none;
  margin: 0 0 clamp(22px, 2vw, 36px);
  padding: 0;
  display: grid;
  gap: clamp(8px, 0.7vw, 12px);
}
.sol-punti li {
  position: relative;
  padding-left: 26px;
  font-size: clamp(14px, 1.02vw, 16.5px);
  line-height: 1.5;
  color: var(--c-white-soft);
}
.sol-punti li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--c-lime);
}

/* Le altezze delle immagini erano da rivedere: prima ogni card aveva un
   16/11 e la fotografia si adattava come poteva. Qui il rapporto e' unico per
   tutte e cinque, quindi le fasce hanno lo stesso respiro e scorrendo non si
   percepiscono salti di altezza. */
.sol-media { margin: 0; }
.sol-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-media);
}

/* ---------- L'ingresso di una fascia ----------
   Revisione 22/09: "le animazioni di ingresso dei testi e delle immagini
   devono essere piu' complesse, non facendo cose a caso ma essendo sempre
   raffinate".
   La prima versione faceva una cosa sola, e la faceva a tutto: ogni elemento
   scivolava in su di quattordici pixel. Tanti oggetti diversi che si muovono
   nello stesso modo non sono una composizione, sono un effetto applicato.

   Qui ogni elemento entra come e' fatto, e in un ordine che segue la lettura:

     il numero     sale e prende corpo, e' il primo segno della fascia
     l'occhiello   la tacca si tira da sinistra, poi arriva la parola
     il titolo     si scopre dal basso da dietro una maschera, riga compresa
     il testo      sale, piano
     i requisiti   uno dopo l'altro, con l'anello che si accende per ultimo
     la CTA        arriva alla fine, che e' il suo posto nel discorso

   La fotografia non scivola: si scopre. Una maschera si apre dal lato da cui
   la fascia entra mentre l'immagine rientra da una scala appena maggiore —
   e' il modo in cui si scopre una fotografia, non il modo in cui si sposta
   un rettangolo.

   I tempi sono tutti multipli di 60ms a partire da 80: la cascata si sente
   come un ritmo e non come una serie di ritardi scelti a caso. */

.sol-sezione.e-in-vista .sol-media img {
  animation: sol-scopri 1.05s var(--ease-morbido);
}
.sol-invertita.e-in-vista .sol-media img { animation-name: sol-scopri-sinistra; }

@keyframes sol-scopri {
  from { clip-path: inset(0 0 0 100%); transform: scale(1.08); }
  to   { clip-path: inset(0 0 0 0);    transform: none; }
}
@keyframes sol-scopri-sinistra {
  from { clip-path: inset(0 100% 0 0); transform: scale(1.08); }
  to   { clip-path: inset(0 0 0 0);    transform: none; }
}

/* Il numero: sale e si riempie. */
.sol-sezione.e-in-vista .sol-numero {
  animation: sol-numero .8s var(--ease-morbido) 80ms backwards;
}
@keyframes sol-numero {
  from { opacity: 0; transform: translateY(16px); letter-spacing: .08em; }
  to   { opacity: 1; transform: none; letter-spacing: normal; }
}

/* L'occhiello: prima la tacca che si tira, poi la parola. */
.sol-sezione .eyebrow { position: relative; }
.sol-sezione.e-in-vista .eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: .35;
  transform-origin: 0 50%;
  animation: sol-tacca .7s var(--ease-morbido) 140ms backwards;
}
@keyframes sol-tacca {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.sol-sezione.e-in-vista .eyebrow {
  animation: sol-sale .7s var(--ease-morbido) 200ms backwards;
}

/* Il titolo si scopre dal basso, come uscisse da sotto una riga. */
.sol-sezione.e-in-vista .sol-titolo {
  animation: sol-scopri-testo .85s var(--ease-morbido) 260ms backwards;
}
@keyframes sol-scopri-testo {
  from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(12px); }
  to   { opacity: 1; clip-path: inset(-20% 0 -20% 0); transform: none; }
}

.sol-sezione.e-in-vista .lead {
  animation: sol-sale .75s var(--ease-morbido) 380ms backwards;
}

/* I requisiti, uno dopo l'altro. */
.sol-sezione.e-in-vista .sol-punti li {
  animation: sol-sale .65s var(--ease-morbido) backwards;
}
.sol-sezione.e-in-vista .sol-punti li:nth-child(1) { animation-delay: 440ms; }
.sol-sezione.e-in-vista .sol-punti li:nth-child(2) { animation-delay: 500ms; }
.sol-sezione.e-in-vista .sol-punti li:nth-child(3) { animation-delay: 560ms; }
/* L'anello si accende quando la riga e' gia' arrivata. */
.sol-sezione.e-in-vista .sol-punti li::before {
  animation: sol-anello .5s var(--ease) backwards;
}
.sol-sezione.e-in-vista .sol-punti li:nth-child(1)::before { animation-delay: 620ms; }
.sol-sezione.e-in-vista .sol-punti li:nth-child(2)::before { animation-delay: 680ms; }
.sol-sezione.e-in-vista .sol-punti li:nth-child(3)::before { animation-delay: 740ms; }
@keyframes sol-anello {
  from { transform: scale(.2); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.sol-sezione.e-in-vista .sol-testo .btn {
  animation: sol-sale .7s var(--ease-morbido) 700ms backwards;
}

@keyframes sol-sale {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .sol-riga { grid-template-columns: 1fr; gap: 24px; }
  /* In colonna singola la fotografia va sempre sopra al testo: alternarla
     sotto per le sezioni pari spezzerebbe il ritmo invece di darlo. */
  .sol-sezione .sol-media,
  .sol-invertita .sol-media { order: -1; }
  .sol-invertita .sol-testo { order: 0; }
  .sol-titolo { max-width: 100%; }
  .sol-media img { aspect-ratio: 16 / 11; }
}

/* Chi ha chiesto meno movimento vede la fascia gia' composta. */
@media (prefers-reduced-motion: reduce) {
  .sol-sezione.e-in-vista .sol-media img,
  .sol-sezione.e-in-vista .sol-numero,
  .sol-sezione.e-in-vista .eyebrow,
  .sol-sezione.e-in-vista .eyebrow::after,
  .sol-sezione.e-in-vista .sol-titolo,
  .sol-sezione.e-in-vista .lead,
  .sol-sezione.e-in-vista .sol-punti li,
  .sol-sezione.e-in-vista .sol-punti li::before,
  .sol-sezione.e-in-vista .sol-testo .btn { animation: none; }
}

/* ---------- Careers: le posizioni aperte ----------
   Revisione 21/09: le posizioni aperte diventano il contenuto principale
   della pagina e hanno bisogno di un layout proprio. Finche' l'ATS non e'
   collegato, qui vive l'annuncio d'esempio.

   Fondo bianco, come tutta la sezione: il widget del fornitore arrivera' coi
   suoi colori, e una scheda navy costruita a mano andrebbe rifatta il giorno
   dopo. */
.elenco-posizioni {
  list-style: none;
  margin: clamp(24px, 2.4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 1.3vw, 22px);
}
.posizione {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2vw, 34px);
  background: var(--c-white);
}
.posizione-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(12px, 1.4vw, 24px);
}
.posizione-titolo {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}
.posizione-sotto {
  margin: 6px 0 0;
  font-size: clamp(14px, 1.02vw, 16px);
  color: var(--c-ink-soft);
}
/* Le condizioni in breve: si leggono prima di aprire, e spesso bastano a
   capire se vale la pena aprire. */
.posizione-tag {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.posizione-tag li {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(var(--c-blue-rgb), 0.07);
  color: var(--c-blue);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
/* L'accordion dentro la scheda vive su fondo bianco: lo stato di base e'
   pensato per il blu e sarebbe invisibile. */
.posizione .faq-list { margin-top: clamp(16px, 1.5vw, 26px); }
.posizione .acc-item { border-color: var(--c-line); --segno: var(--c-blue); }
.posizione .acc-trigger { color: var(--c-blue); font-weight: 600; }
.posizione .acc-item.is-open {
  background: rgba(var(--c-blue-rgb), 0.04);
  border-color: rgba(var(--c-blue-rgb), 0.24);
  --segno: var(--c-blue);
}
.posizione .acc-item.is-open .acc-trigger,
.posizione .acc-item.is-open .acc-panel { color: var(--c-ink); }
.posizione-corpo h4 {
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 700;
  margin: clamp(16px, 1.4vw, 24px) 0 8px;
}
.posizione-corpo h4:first-child { margin-top: 0; }
.posizione-corpo p { margin: 0 0 10px; line-height: 1.6; }
.posizione-corpo ul { margin: 0 0 10px; padding-left: 20px; }
.posizione-corpo li { margin-bottom: 6px; line-height: 1.55; }
.posizione-come { margin-top: clamp(14px, 1.2vw, 20px); }

@media (max-width: 720px) {
  .posizione-testa { flex-direction: column; }
}

/* Il bottone di candidatura rapida sta sotto alla testa dell'annuncio, prima
   della descrizione: chi ha gia' deciso non deve aprire il testo per trovarlo,
   chi sta ancora decidendo lo ritrova comunque scorrendo.
   A destra (22/09), sotto le etichette delle condizioni: e' l'azione della
   scheda, e le azioni di questo sistema chiudono a destra. */
.posizione-candidati {
  margin-top: clamp(16px, 1.5vw, 24px);
  margin-left: auto;
  display: inline-flex;
}
.posizione-testa + .posizione-candidati { display: flex; width: fit-content; }
@media (max-width: 720px) {
  .posizione-candidati { margin-left: 0; }
}

/* ---------- L'ingresso delle card di processo ----------
   Revisione 22/09: "le card devono avere un'animazione di ingresso da sinistra
   verso destra, deve apparire prima la 1, poi la 2, poi la 3, poi la 4".

   Prima queste griglie usavano [data-stagger], che scaglionava sì nell'ordine
   giusto ma faceva salire tutte le card dal basso: l'ordine si sentiva, la
   direzione no. Qui ogni card arriva da sinistra, cioe' dalla card che la
   precede, e la sequenza si legge come una lettura invece che come quattro
   elementi che compaiono.

   Il numero arriva un soffio dopo la card che lo contiene: e' il segno che
   dice a che punto del processo siamo, e si posa quando la card e' gia' li'. */
.steps-grid .step-item { --passo-entrata: 0ms; }
.steps-grid .step-item:nth-child(2) { --passo-entrata: 110ms; }
.steps-grid .step-item:nth-child(3) { --passo-entrata: 220ms; }
.steps-grid .step-item:nth-child(4) { --passo-entrata: 330ms; }
.steps-grid .step-item:nth-child(5) { --passo-entrata: 440ms; }

.steps-grid.e-in-vista .step-item {
  animation: step-entra .72s var(--ease-morbido) var(--passo-entrata) backwards;
}
.steps-grid.e-in-vista .step-item .step-n {
  animation: step-numero .6s var(--ease-morbido) calc(var(--passo-entrata) + 180ms) backwards;
}
@keyframes step-entra {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes step-numero {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

/* Su schermo stretto le card si impilano: da sinistra non avrebbe piu' senso,
   la direzione della lettura li' e' verso il basso. */
@media (max-width: 900px) {
  @keyframes step-entra {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .steps-grid.e-in-vista .step-item,
  .steps-grid.e-in-vista .step-item .step-n { animation: none; }
}