/* =============================================================================
   UniNeuromed — Sezioni: hero, ecosistema, CTA, footer
   ========================================================================== */

/* --- Hero video (home) ---------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92svh, 860px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 4rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  background: var(--color-ink);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Lentissimo movimento di avvicinamento: suggerisce filmato in riproduzione
     anche quando è visibile la sola poster image. Disattivato da
     prefers-reduced-motion insieme a tutte le altre animazioni. */
  animation: heroPan 34s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroPan {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.2%, -0.8%, 0); }
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  /* Overlay a due strati: garantisce il contrasto del testo (WCAG AA) e dà
     alla scena una vignettatura cinematografica da fotogramma video. */
  background:
    /* scurisce la metà destra, dove appoggia il testo, e lascia leggibile
       la scena sulla sinistra */
    linear-gradient(272deg, rgba(5, 50, 94, .70) 0%, rgba(5, 50, 94, .52) 42%, rgba(5, 50, 94, .12) 100%),
    linear-gradient(180deg, rgba(5, 50, 94, .58) 0%, rgba(5, 50, 94, .18) 36%, rgba(5, 50, 94, .78) 100%),
    radial-gradient(130% 100% at 30% 45%, transparent 40%, rgba(5, 50, 94, .48) 100%);
}

/* Etichetta discreta che dichiara la presenza del video */
.hero__videoflag {
  position: absolute;
  right: var(--gutter); bottom: 1.6rem;
  z-index: 1;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .42rem .9rem .42rem .5rem;
  border-radius: var(--radius-pill);
  background: rgba(5, 50, 94, .42);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, .88);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.hero__videoflag .play {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
}
.hero__videoflag .play svg { width: 9px; height: 9px; margin-left: 1.5px; }
.hero__videoflag .bars {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 11px; margin-left: .1rem;
}
.hero__videoflag .bars i {
  width: 2px; border-radius: 1px; background: var(--color-accent);
  animation: heroBars 1.25s ease-in-out infinite;
}
.hero__videoflag .bars i:nth-child(1) { height: 5px;  animation-delay: 0s; }
.hero__videoflag .bars i:nth-child(2) { height: 11px; animation-delay: .18s; }
.hero__videoflag .bars i:nth-child(3) { height: 7px;  animation-delay: .36s; }
@keyframes heroBars { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

.hero__content {
  position: relative;
  /* larghezza scelta perché i tre pulsanti restino su una sola riga
     anche con il gutter massimo (schermi molto ampi) */
  max-width: 770px;
  margin-inline: auto;
  color: #fff;
}
/* Da tablet in su il blocco di testo scorre verso destra rispetto alla propria
   posizione centrata, lasciando respirare la scena del video sulla sinistra.
   Si usa una traslazione per non alterare il calcolo del centraggio. */
@media (min-width: 768px)  { .hero__content { transform: translateX(clamp(0px, 4vw, 70px)); } }
@media (min-width: 1024px) { .hero__content { transform: translateX(clamp(0px, 7vw, 170px)); } }
.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: var(--space-5);
  padding: .38rem .9rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: .03em;
}
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(0, 143, 164, .25); }
.hero h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: #fff;
  margin-bottom: var(--space-5);
}
.hero h1 em { font-style: normal; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, .88);
  max-width: 620px;
  margin-bottom: var(--space-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__scroll {
  position: absolute;
  bottom: 1.4rem; left: 50%;
  transform: translateX(-50%);
  display: grid; place-items: center; gap: .35rem;
  color: rgba(255, 255, 255, .7);
  font-size: 10px;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  text-decoration: none;
}
.hero__scroll svg { width: 16px; height: 16px; animation: nudge 2.2s var(--ease-out) infinite; }
.hero__scroll:hover { color: #fff; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (max-width: 767px) {
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 3.5rem); padding-bottom: 4.5rem; }
  .hero__scroll { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__videoflag { right: auto; left: var(--gutter); bottom: 1rem; font-size: 11px; }
}
/* Su schermi molto stretti l'etichetta toglierebbe respiro alle call to action */
@media (max-width: 599px) {
  .hero__videoflag { display: none; }
  .hero { padding-bottom: 3rem; }
}

/* --- Hero, variante chiara ------------------------------------------------
   Stessa struttura della hero scura, con valori tonali invertiti: fondo grigio
   chiaro, testo navy, scrim schiarente al posto di quello scurente.
   ------------------------------------------------------------------------- */
.hero--light {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.hero--light .hero__media::after {
  background:
    /* schiarisce la metà destra, dove appoggia il testo, e lascia leggibile
       la scena sulla sinistra */
    linear-gradient(272deg, rgba(244, 246, 250, .90) 0%, rgba(244, 246, 250, .68) 44%, rgba(244, 246, 250, .10) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .06) 34%, rgba(240, 243, 249, .62) 100%);
}
.hero--light .hero__content { color: var(--color-ink); }
.hero--light .hero h1,
.hero--light h1 { color: var(--color-primary); }
.hero--light .hero__sub { color: var(--color-text-muted); }
/* Su fondo chiaro il verde acqua di brand non raggiunge il contrasto AA:
   la parola evidenziata usa la variante scura dell'accento. */
.hero--light h1 em {
  background: linear-gradient(100deg, var(--color-primary) 0%, #0b4a9c 52%, var(--color-accent-dark) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.hero--light .hero__badge {
  background: rgba(255, 255, 255, .78);
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}
.hero--light .hero__scroll { color: var(--color-text-muted); }
.hero--light .hero__scroll:hover { color: var(--color-ink); }
.hero--light .hero__videoflag {
  background: rgba(255, 255, 255, .8);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.hero--light .hero__videoflag .play {
  background: rgba(5, 50, 94, .07);
  border-color: rgba(5, 50, 94, .16);
  color: var(--color-primary-dark);
}
.hero--light :focus-visible { outline-color: var(--color-primary); }

/* --- Hero pagine interne -------------------------------------------------- */
/* Fondo blu primario pieno. Vale per le testate senza fotografia: dove c'è
   l'immagine il fondo resta coperto da quella e dal suo velo, e la testata
   dei corsi ha una regola propria su fondo bianco. */
.page-hero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  background: var(--surface-brand);
  color: rgba(255, 255, 255, .85);
  overflow: hidden;
  isolation: isolate;
}
/* Velature agli angoli: servono solo a non lasciare la fascia piatta. */
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(820px 400px at 88% -10%, rgba(255, 255, 255, .10), transparent 65%),
    radial-gradient(620px 340px at 8% 110%, rgba(0, 143, 164, .24), transparent 62%);
}
.page-hero__inner { max-width: 760px; }
.page-hero h1 { color: #fff; margin-bottom: var(--space-4); }
.page-hero p { font-size: var(--fs-lead); color: rgba(255, 255, 255, .8); margin-bottom: 0; }
.page-hero .overline { color: var(--color-accent-light); }
.page-hero__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: .7rem; }
.page-hero--media { padding-block: 0; }
.page-hero--media .page-hero__bg { position: absolute; inset: 0; z-index: -1; }
.page-hero--media .page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--media .page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(5, 50, 94, .92) 0%, rgba(5, 50, 94, .62) 70%, rgba(5, 50, 94, .45) 100%);
}
.page-hero--media .page-hero__wrap { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }

/* --- Testata a due colonne su fondo bianco --------------------------------
   Usata dalle pagine dei corsi di laurea. Il testo sta a sinistra, l'immagine
   a destra arriva a filo dello schermo. I colori seguono il corso: titolo e
   pulsanti prendono --accent, occhiello e testo restano nel blu primario.
   ------------------------------------------------------------------------- */
.page-hero--split {
  background: var(--surface-page);
  color: var(--color-text);
  padding-block: 0;
}
.page-hero--split::before { content: none; }
.page-hero--split .page-hero__wrap {
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 6rem);
}
.page-hero--split .page-hero__inner { max-width: 620px; }
.page-hero--split .overline { color: var(--color-primary); }
.page-hero--split .overline::before { background: var(--color-primary); }
/* Il titolo usa il colore pieno del corso: è testo grande, quindi la soglia
   di contrasto da rispettare è 3:1 e la rispetta anche il teal. */
.page-hero--split h1 { color: var(--accent, var(--color-primary)); }
.page-hero--split p { color: var(--color-primary); }
/* I pulsanti usano la variante scura del colore di ambito: sul teal pieno il
   bianco si fermerebbe a 3.8:1, sotto la soglia richiesta per il testo. */
.page-hero--split .btn--primary {
  background: var(--accent-dark, var(--color-primary));
  border-color: var(--accent-dark, var(--color-primary));
  box-shadow: none;
}
.page-hero--split .btn--primary:hover { filter: brightness(.9); }
.page-hero--split .btn--outline {
  border-color: var(--accent-dark, var(--color-primary));
  color: var(--accent-dark, var(--color-primary));
}
.page-hero--split .btn--outline:hover {
  background: color-mix(in srgb, var(--accent, var(--color-primary)) 10%, #ffffff);
}

.page-hero--split .page-hero__media { display: none; }

@media (min-width: 900px) {
  .page-hero--split .page-hero__wrap { min-height: 30rem; display: flex; align-items: center; }
  .page-hero--split .page-hero__inner { width: min(100%, 660px); }
  .page-hero--split .page-hero__media {
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(48%, 900px);
  }
  /* La fotografia porta già dentro di sé l'arco e il cerchio del colore di
     ambito: il contorno è bianco e si fonde con il fondo della testata.
     Serve quindi "contain" e non "cover", altrimenti il ritaglio mangerebbe
     proprio la forma. Allineata a destra, dove sta il soggetto. */
  .page-hero--split .page-hero__media img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: right center;
  }
}

/* Sotto i 900 px le due colonne si impilano: l'immagine diventa una fascia
   sotto il testo, con lo stesso arco e lo stesso cerchio in scala ridotta. */
@media (max-width: 899.98px) {
  .page-hero--split .page-hero__media {
    display: block;
    position: relative;
    margin-top: clamp(1.25rem, .75rem + 2vw, 2rem);
  }
  /* Impilata sotto il testo la fotografia prende tutta la larghezza e
     conserva le proporzioni: nessun ritaglio, nessuna cornice vuota. */
  .page-hero--split .page-hero__media img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* --- Sezione ecosistema (scura, con flusso) -------------------------------
   Fondo blu primario pieno, non più il navy. Le due velature radiali restano
   solo per dare profondità agli angoli: senza, la fascia risulterebbe piatta. */
.ecosystem { position: relative; overflow: hidden; isolation: isolate; }
.section--ink.ecosystem { background: var(--surface-brand); }
.ecosystem::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 440px at 82% 8%, rgba(255, 255, 255, .09), transparent 62%),
    radial-gradient(600px 400px at 8% 92%, rgba(0, 143, 164, .20), transparent 60%);
}
.ecosystem__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }

/* --- CTA finale ----------------------------------------------------------- */
.cta {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  background: var(--gradient-brand-block);
  color: rgba(255, 255, 255, .85);
  overflow: hidden;
  isolation: isolate;
}
.cta::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(640px 360px at 88% 92%, rgba(0, 143, 164, .45), transparent 62%),
    radial-gradient(520px 300px at 6% 4%, rgba(91, 182, 232, .22), transparent 60%);
}
.cta__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-8); align-items: center; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, .8); font-size: var(--fs-lead); }
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Banda gradiente sottile --------------------------------------------- */
/* Filetto di separazione fra il blocco di chiusura e il piede: riprende
   i colori di ambito del brand book, in sequenza. */
.brandline {
  height: 5px;
  background: linear-gradient(90deg,
    var(--color-primary) 0%, var(--color-primary) 17%,
    var(--color-accent) 17%, var(--color-accent) 34%,
    var(--color-secondary) 34%, var(--color-secondary) 50%,
    var(--color-ink) 50%, var(--color-ink) 67%,
    var(--color-sky) 67%, var(--color-sky) 84%,
    var(--color-gold) 84%, var(--color-gold) 100%);
}

/* --- Colonne ammissioni/tasse/borse -------------------------------------- */
.tri-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: var(--space-5); }
.tri-col__item {
  display: flex; flex-direction: column;
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--color-primary);
}
.tri-col__item:nth-child(2) { border-top-color: var(--color-secondary); }
.tri-col__item:nth-child(3) { border-top-color: var(--color-accent); }
.tri-col__item h3 { font-size: var(--fs-h4); }
.tri-col__item ul { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: .55rem; font-size: var(--fs-sm); }
.tri-col__item li { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding-bottom: .55rem; border-bottom: 1px dashed var(--color-border); }
.tri-col__item li:last-child { border-bottom: 0; padding-bottom: 0; }
.tri-col__item li span:last-child { color: var(--color-text-muted); text-align: right; }
.tri-col__item .btn { margin-top: auto; }

/* --- Card laboratorio ----------------------------------------------------- */
.lab-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 290px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.lab-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.lab-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5, 50, 94, .1) 0%, rgba(5, 50, 94, .55) 52%, rgba(5, 50, 94, .92) 100%);
}
.lab-card:hover img { transform: scale(1.06); }
.lab-card:hover { color: #fff; }
.lab-card h3 { color: #fff; font-size: 1.12rem; margin-bottom: .35rem; }
.lab-card p { font-size: var(--fs-xs); color: rgba(255, 255, 255, .82); margin: 0; }
.lab-card .badge { align-self: flex-start; margin-bottom: .7rem; background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(4px); }

/* --- Mappa segnaposto ----------------------------------------------------- */
.map-ph {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border-strong);
  background:
    linear-gradient(var(--color-surface-2) 1px, transparent 1px) 0 0 / 100% 42px,
    linear-gradient(90deg, var(--color-surface-2) 1px, transparent 1px) 0 0 / 42px 100%,
    var(--color-surface);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-5);
}
.map-ph__inner { max-width: 340px; }
.map-ph svg { width: 34px; height: 34px; margin: 0 auto .7rem; color: var(--color-primary); }
.map-ph p { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }

/* --- Indice di pagina (ancore) ------------------------------------------- */
.pageindex {
  position: sticky;
  top: calc(var(--header-h) + 1.2rem);
  align-self: start;
}
.pageindex h2 {
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: .8rem;
}
.pageindex ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-border); }
.pageindex li { margin: 0; }
.pageindex a {
  display: block;
  padding: .4rem 0 .4rem 1rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.pageindex a:hover, .pageindex a.is-active { color: var(--color-primary-dark); border-left-color: var(--color-primary); }
.with-index { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start; }
@media (max-width: 899px) { .with-index { grid-template-columns: 1fr; } .pageindex { display: none; } }

.subsection { scroll-margin-top: calc(var(--header-h) + 24px); }
.subsection + .subsection { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* --- Contenuto editoriale (articolo) ------------------------------------- */
.prose { max-width: 720px; }
.prose h2 { margin-top: var(--space-8); font-size: var(--fs-h3); }
.prose h3 { margin-top: var(--space-6); font-size: var(--fs-h4); }
.prose > *:first-child { margin-top: 0; }
.prose figure { margin: var(--space-6) 0; }
.prose figure img { border-radius: var(--radius-lg); width: 100%; }
.prose figcaption { margin-top: .6rem; font-size: var(--fs-xs); color: var(--color-text-muted); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-secondary);
  font-size: var(--fs-lead);
  color: var(--color-ink);
}

/* --- Footer --------------------------------------------------------------- */
/* Il piede ha fondo bianco: tutti i testi sono scuri. Lo stacco dal blocco
   di chiusura, che è blu pieno, è netto di suo; il filetto a sei colori resta
   come cerniera fra i due. */
.site-footer { background: var(--surface-footer); color: var(--color-text); font-size: var(--fs-sm); }
.site-footer h2, .site-footer h3 { color: var(--color-primary); }
.site-footer a { color: var(--color-text); text-decoration: none; }
.site-footer a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.footer__top { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7) var(--space-6); }
@media (min-width: 560px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .footer__grid { grid-template-columns: minmax(230px, 1.35fr) repeat(4, minmax(0, 1fr)); } }
@media (min-width: 560px) { .footer__brand { grid-column: span 2; } }
@media (min-width: 900px) { .footer__brand { grid-column: span 3; } }
@media (min-width: 1140px) { .footer__brand { grid-column: span 1; } }
/* Il piede ha fondo bianco: qui vale la variante a colori del lockup. Lo
   spazio non manca, quindi quello lungo con il claim resta anche sul
   telefono: è il posto in cui il claim si legge davvero. */
.footer__brand .brand {
  --tint-color: block;
  --tint-white: none;
  --claim-color: block;
  --claim-white: none;
  --mini-color: none;
  --mini-white: none;
}
/* La colonna del piede è stretta: il lockup si adatta alla sua larghezza
   invece di essere tagliato ai lati. */
.footer__brand .brand { display: flex; width: 100%; }
.footer__brand .brand__logo { width: 100%; max-width: 320px; height: auto; }
.footer__about { margin-top: var(--space-4); max-width: 320px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.footer__col h3 {
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-4);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer__col li { margin: 0; }
.footer__contact { display: grid; gap: .6rem; margin-top: var(--space-4); font-size: var(--fs-sm); }
.footer__contact div { display: flex; gap: .6rem; align-items: flex-start; }
.footer__contact svg { flex: none; width: 15px; height: 15px; margin-top: .28rem; color: var(--color-accent-dark); }
.footer__social { display: flex; gap: .5rem; margin-top: var(--space-5); }
.footer__social a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
}
.footer__social a:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-dark); }
.footer__social svg { width: 17px; height: 17px; }
.footer__bottom {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* Seconda riga del piede: codice fiscale, decreto e registrazione. */
.footer__reg { margin: .35rem 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
.newsletter { margin-top: var(--space-5); }
.newsletter__title {
  margin: 0 0 .6rem;
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.newsletter form { display: flex; gap: .5rem; flex-wrap: wrap; }
.newsletter input { flex: 1 1 180px; }

/* --- Hero a due colonne (testo + anteprima video) --------------------------
   Il testo occupa la colonna sinistra, la card video esce a filo del bordo
   destro del viewport. Su schermi stretti le due parti si impilano.
   ------------------------------------------------------------------------- */
.hero--split {
  position: relative;
  display: block;
  min-height: min(88svh, 800px);
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 3vw, 4rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  background: linear-gradient(120deg, #eef0f6 0%, #f4f5f9 46%, #eef2f4 100%);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  isolation: isolate;
}
.hero--split .hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  min-height: 100%;
}

/* Filigrana del marchio sul bordo sinistro */
.hero__watermark {
  position: absolute;
  z-index: -1;
  left: clamp(-150px, -8vw, -55px);
  top: 50%;
  transform: translateY(-48%);
  width: clamp(180px, 19vw, 330px);
  height: auto;
  color: #dde1ef;
  opacity: .6;
  pointer-events: none;
}
@media (max-width: 999px) { .hero__watermark { opacity: .5; } }

/* --- Colonna di testo ----------------------------------------------------- */
.hero--split .hero__content {
  position: relative;
  max-width: 640px;
  margin: 0;
  transform: none;
  color: var(--color-ink);
}
.hero--split h1 { color: var(--color-primary); }
/* Claim della home: tre parole in maiuscolo, una per riga, come nel brand book */
/* h1.hero__claim e non .hero__claim: serve a superare `.hero--split h1`,
   che poco sopra imposta il navy su tutti i titoli di questa hero. */
h1.hero__claim {
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.02;
  text-wrap: nowrap;
  /* Il claim della home va nel blu primario del marchio, non nel navy
     usato per gli altri titoli: è la stessa tinta del logo che gli sta
     sopra. Su fondo chiaro il contrasto è 15.9:1. */
  color: var(--color-primary);
}
.hero--split .hero__sub { color: var(--color-text-muted); max-width: 520px; }
/* Su fondo chiaro il verde acqua di brand non raggiunge il contrasto AA:
   la parola evidenziata chiude sulla variante scura dell accento. */
.hero--split h1 em {
  background: linear-gradient(100deg, var(--color-primary) 0%, #0b4a9c 52%, var(--color-accent-dark) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.hero--split .hero__badge {
  background: rgba(255, 255, 255, .86);
  border-color: var(--color-border-strong);
  color: var(--color-ink);
  box-shadow: var(--shadow-xs);
}
.hero--split .hero__actions .btn svg { width: 18px; height: 18px; }
/* padding ridotto: i tre pulsanti restano su una sola riga nella colonna */
.hero--split .hero__actions { gap: .6rem; }
.hero--split .hero__actions .btn { padding-inline: 1rem; font-size: .875rem; }
.hero--split .hero__scroll {
  position: static;
  transform: none;
  margin: clamp(1.6rem, 1rem + 2vw, 2.8rem) auto 0;
  color: var(--color-text-muted);
}
.hero--split .hero__scroll:hover { color: var(--color-ink); }
.hero--split :focus-visible { outline-color: var(--color-primary); }

/* --- Card dell anteprima video -------------------------------------------- */
.hero__player { position: relative; min-width: 0; }
.hero__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-ink);
  box-shadow: 0 26px 60px rgba(5, 50, 94, .22);
  isolation: isolate;
}
.hero__frame::after {
  content: "";
  position: absolute; inset: 0;
  /* Velatura della card. Alla sfumatura verticale si aggiunge un alone scuro
     al centro: è la zona del pulsante e della scritta "Video Spot", che con
     una fotografia chiara sotto perderebbero leggibilità. */
  background:
    radial-gradient(58% 46% at 50% 47%, rgba(5, 50, 94, .52) 0%, rgba(5, 50, 94, .22) 58%, transparent 100%),
    linear-gradient(180deg, rgba(5, 50, 94, .20) 0%, rgba(5, 50, 94, .06) 45%, rgba(5, 50, 94, .46) 100%);
  transition: opacity var(--dur) var(--ease-out);
  /* il livello è decorativo: non deve intercettare i clic sul pulsante */
  pointer-events: none;
  z-index: 1;
}
.hero__video {
  width: 100%; height: 100%;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  display: block;
}
/* Quando il video è in riproduzione spariscono copertura e comandi decorativi */
.hero__frame.is-playing::after,
.hero__frame.is-playing .hero__rings { opacity: 0; }
.hero__frame.is-playing .hero__play { opacity: 0; pointer-events: none; }

/* Anelli concentrici attorno al pulsante */
.hero__rings {
  position: absolute; inset: 0;
  z-index: 2;
  display: grid; place-items: center;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.hero__rings i {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
}
.hero__rings i:nth-child(1) { width: 190px; height: 190px; }
.hero__rings i:nth-child(2) { width: 290px; height: 290px; border-color: rgba(255, 255, 255, .18); }
.hero__rings i:nth-child(3) { width: 400px; height: 400px; border-color: rgba(255, 255, 255, .10); }

/* Pulsante di riproduzione */
.hero__play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  background: transparent;
  border: 0;
  color: #fff;
  transition: opacity var(--dur) var(--ease-out);
}
.hero__playbtn {
  display: grid; place-items: center;
  width: clamp(74px, 8vw, 108px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--color-primary) 0%, #0b4a9c 55%, var(--color-accent) 100%);
  border: 3px solid rgba(255, 255, 255, .92);
  box-shadow: 0 14px 38px rgba(5, 50, 94, .38);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.hero__playbtn svg { width: 30%; height: 30%; margin-left: 8%; color: #fff; }
.hero__play:hover .hero__playbtn { transform: scale(1.06); box-shadow: 0 18px 46px rgba(5, 50, 94, .46); }
.hero__play:active .hero__playbtn { transform: scale(.99); }
.hero__playlabel {
  position: relative;
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(5, 50, 94, .6);
}
.hero__playlabel::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -.65rem;
  transform: translateX(-50%);
  width: 42px; height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .8);
}
.hero__playnote {
  position: absolute;
  z-index: 4;
  left: 50%; bottom: 1.2rem;
  transform: translateX(-50%);
  margin: 0;
  padding: .45rem .95rem;
  border-radius: var(--radius-pill);
  background: rgba(5, 50, 94, .72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.hero__playnote[hidden] { display: none; }

/* --- Da desktop: card a filo del bordo destro ------------------------------ */
@media (min-width: 1060px) {
  .hero--split .hero__grid { display: block; }
  .hero--split .hero__content { max-width: min(54%, 660px); }
  .hero__player {
    position: absolute;
    top: calc(var(--header-h) + clamp(.5rem, 2vh, 1.5rem));
    bottom: clamp(1rem, 3vh, 2.5rem);
    right: 0;
    width: clamp(420px, 44vw, 780px);
  }
  .hero__frame { height: 100%; border-radius: 44px 0 0 44px; }
  .hero__video { height: 100%; aspect-ratio: auto; }

}

@media (max-width: 1059px) {
  .hero--split { min-height: 0; }
  .hero--split .hero__content { max-width: none; }
  .hero__rings i:nth-child(3) { display: none; }
}
@media (max-width: 767px) {
  .hero--split .hero__actions .btn { flex: 1 1 100%; }
  .hero__rings i:nth-child(1) { width: 140px; height: 140px; }
  .hero__rings i:nth-child(2) { width: 210px; height: 210px; }
  .hero__playlabel { font-size: 11px; }
}

/* Badge della hero come collegamento: al decreto ministeriale in PDF. */
.hero__badge--link {
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.hero__badge--link svg { width: 13px; height: 13px; flex: none; opacity: .7; margin-left: .1rem; }
.hero__badge--link:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); }
.hero--light .hero__badge--link { color: var(--color-ink); }
.hero--light .hero__badge--link:hover {
  background: #fff;
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}