/* ==========================================================================
   Vivavoce, funnel evergreen «colloquio gratuito»: stile della landing
   assets/css/landing.css, dopo vivavoce.css (che non va modificato).
   Solo regole della landing, con il prefisso lp- o dentro .page-landing.
   Mobile first: base 390 px (provata anche a 360 e 430), poi 600, 760, 1000, 1180.

   Indice
    1. Hero: titolo, due foto, un pulsante (#hero)
    2. Fascia loghi e Direttore Sanitario (#partner)
    3. «Respira. Rallenta. Calmati.» (#non-solo-ansia)
    4. Come funziona (#come-funziona)
    5. Storie e recensioni (#storie)
    6. Équipe (#equipe)
    7. Domande frequenti (#domande)
    8. CTA finale (#richiesta-finale)
    9. Modalità verifica
   10. Senza JavaScript, movimento ridotto
   ========================================================================== */


/* 0. Header della landing (16/10): logo Vivavoce al centro e più grande.
   L'altezza dell'header vale per tutta la pagina (hero, ancore, barra fissa la leggono da qui). */
.page-landing { --header-h: 68px; }
.page-landing .site-header { --logo-h: 44px; }
.page-landing .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.page-landing .header-inner > .brand { grid-column: 2; grid-row: 1; }
.page-landing .header-inner > .header-cta { grid-column: 3; grid-row: 1; justify-self: end; }
@media (min-width: 1000px) {
  .page-landing { --header-h: 84px; }
  .page-landing .site-header { --logo-h: 56px; }
}

/* 1. Hero (modifiche di Anthony del 16/10): titolo, due foto una sopra l'altra, un solo pulsante
   -------------------------------------------------------------------------- */
.lp-hero {
  padding: calc(var(--header-h) + 10px) 0 72px;
}
/* Blob chiari sul gradiente: solo dietro a titoli grandi, foto e angoli vuoti */
.lp-hero-blob1 { --size: 440px; top: -260px; right: -250px; }
.lp-hero-blob2 { --size: 300px; bottom: -70px; left: -230px; }

.lp-hero .kicker { margin-bottom: 12px; }
.lp-h1 { color: #fff; }
.lp-h1 .h1-big { text-wrap: balance; }
.lp-hero-lead {
  max-width: none;
  margin-top: 12px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
  text-wrap: pretty;
}
.lp-hero-sub {
  max-width: none;
  margin-top: 10px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  text-wrap: pretty;
}

/* Le due foto, una sopra l'altra */
.lp-hero-media { display: grid; gap: 14px; margin-top: 22px; }
.lp-hero-foto { position: relative; margin: 0; }
.lp-hero-foto--giovanni { z-index: 2; }
.lp-hero-foto--wall { z-index: 1; }
.lp-foto-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: none;
  cursor: zoom-in;
}
.lp-foto-btn img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: 0 26px 50px -24px #03193c99;
}
.lp-hero-foto--giovanni img { object-position: 50% 25%; }
.lp-hero-foto--wall img { aspect-ratio: 16 / 10; object-position: 50% 35%; }
.lp-foto-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lp-hero-foto figcaption {
  margin-top: 8px;
  padding: 0 4px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .92);
}
/* «Si aprono»: all'apertura la foto del Wall esce da sotto quella di Giovanni (solo CSS, finisce sempre visibile) */
@keyframes lp-apri {
  from { opacity: 0; transform: translateY(-46%) scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes lp-entra {
  from { transform: scale(.97); }
  to { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .lp-hero-foto--giovanni { animation: lp-entra .5s var(--ease) both; }
  .lp-hero-foto--wall { animation: lp-apri .65s .3s var(--ease) both; }
}

/* 16/10: su mobile le due foto si sovrappongono e si vedono insieme: Giovanni più piccola a sinistra,
   il Wall sopra, più piccolo, a destra; le didascalie diventano etichette e la descrizione del Wall va sotto */
.lp-hero-media-cap { display: none; }
@media (max-width: 999.98px) {
  .lp-hero-media { position: relative; display: block; max-width: 520px; margin-left: auto; margin-right: auto; padding-bottom: 22%; }
  .lp-hero-foto--giovanni { width: 80%; z-index: 1; }
  .lp-hero-foto--wall { position: absolute; right: 0; bottom: 0; width: 56%; z-index: 2; }
  .lp-hero-foto--giovanni img,
  .lp-hero-foto--wall img { aspect-ratio: 4 / 3; }
  .lp-hero-foto--giovanni img { object-position: 50% 0%; }   /* un po' di spazio sopra le teste per l'etichetta */
  .lp-hero-foto--wall .lp-foto-btn { border-radius: calc(var(--r-lg) + 4px); }
  .lp-hero-foto--wall img { border: 4px solid #fff; border-radius: calc(var(--r-lg) + 4px); box-shadow: 0 22px 40px -16px #03193cb3; }
  .lp-hero-foto figcaption { display: none; }
  .lp-hero-foto::before {
    content: attr(data-label);
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(4, 31, 56, .74);
    color: #fff;
    font-size: 12.5px;
    font-weight: 550;
    line-height: 1.35;
    pointer-events: none;
  }
  .lp-hero-foto--wall::before { top: auto; bottom: 12px; left: 12px; }
  .lp-hero-media-cap { display: block; max-width: 520px; margin: 12px auto 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .92); text-align: center; text-wrap: pretty; }
}
@keyframes lp-apri-m {
  from { opacity: 0; transform: translate(-26%, -20%) scale(.82); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 999.98px) and (prefers-reduced-motion: no-preference) {
  .lp-hero-foto--wall { animation-name: lp-apri-m; }
}

/* Pulsante verso il quiz, nota e volti */
.lp-hero-action { margin-top: 22px; }
.lp-hero-cta { width: 100%; gap: 10px; }
.lp-hero-cta .i { width: 20px; height: 20px; color: var(--blue); }
.lp-hero-note {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .92);
  text-align: center;
  text-wrap: balance;
}
.lp-faces { margin-top: 16px; }
.lp-faces .face { background-size: cover; background-position: 50% 50%; }
.lp-faces .face--luca { background-image: url("../img/volti/luca.webp"); }
.lp-faces .face--annaclaudia { background-image: url("../img/volti/annaclaudia.webp"); }
.lp-faces .face--stefano17 { background-image: url("../img/volti/stefano-17.webp"); }
.lp-faces .faces-link { color: #fff; text-decoration-color: rgba(255, 255, 255, .7); text-wrap: balance; }
.lp-faces .faces-link:hover { text-decoration-color: #fff; text-decoration-thickness: 2px; }

@media (max-width: 399.98px) {
  .lp-hero .h1-big { font-size: 34px; }
  .lp-hero-lead { font-size: 18.5px; }
  .lp-hero-sub { font-size: 16px; }
}
/* 360 px: la pillola va su due righe, meglio un rettangolo morbido che una capsula */
@media (max-width: 379.98px) {
  .lp-hero .kicker { align-items: flex-start; border-radius: 14px; font-size: 13.5px; }
  .lp-hero .kicker::before { margin-top: 5px; }
}
@media (min-width: 600px) {
  .lp-hero-cta { width: auto; }
  .lp-hero-note { text-align: left; }
}
@media (min-width: 600px) and (max-width: 999.98px) {
  .lp-hero-media { max-width: 560px; }
  .lp-contatti { max-width: 560px; }
}

/* Da 1000 px (16/10): una colonna centrata a tutta larghezza, titolo su 2 righe;
   sotto le due foto affiancate (la seconda si apre da sotto la prima), poi pulsante e volti */
@media (min-width: 1000px) {
  .lp-hero { padding: calc(var(--header-h) + 36px) 0 120px; }
  .lp-hero-blob1 { --size: 620px; top: -260px; right: -220px; }
  .lp-hero-blob2 { --size: 460px; bottom: -280px; left: -200px; }
  .lp-hero-grid { display: block; }
  .lp-hero-text { max-width: 1000px; margin: 0 auto; }
  .lp-hero .h1-big { font-size: 64px; }
  .lp-hero-lead { max-width: none; margin-top: 18px; font-size: 26px; }
  .lp-hero-sub { max-width: none; margin-top: 10px; font-size: 20px; }
  .lp-hero-chips { margin-top: 24px; }
  .lp-hero-media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1000px; margin: 36px auto 0; }
  .lp-hero-foto--giovanni img,
  .lp-hero-foto--wall img { aspect-ratio: 16 / 10; }
  .lp-hero-action { margin-top: 32px; }
  .lp-faces { margin-top: 20px; }
}
@keyframes lp-apri-x {
  from { opacity: 0; transform: translateX(-42%) scale(.94); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .lp-hero-foto--wall { animation-name: lp-apri-x; }
}

/* Testi dell'hero centrati (richiesta di Anthony del 16/10), anche pulsante, nota e volti */
.lp-hero-text,
.lp-hero-action { text-align: center; }
.lp-hero-lead,
.lp-hero-sub,
.lp-hero-note { margin-left: auto; margin-right: auto; text-align: center; }
.lp-hero-chips { justify-content: center; }
.lp-hero-action .lp-faces { justify-content: center; }
@media (min-width: 600px) {
  .lp-hero-cta { display: inline-flex; }
  .lp-hero-note { text-align: center; }
}

/* Foto ingrandita (#lp-imodal), con lo stile del modal video */
.lp-imodal .vmodal-panel { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.lp-imodal-fig { margin: 0; }
.lp-imodal-img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 230px);
  max-height: calc(100dvh - 230px);
  object-fit: contain;
  border-radius: 16px;
}
.lp-imodal-cap { margin-top: 14px; font-size: 15.5px; line-height: 1.5; color: #fff; }
@media (min-width: 760px) {
  .lp-imodal .vmodal-panel { min-height: 0; }
}


/* 2. Fascia loghi e Direttore Sanitario
   -------------------------------------------------------------------------- */
.lp-partner {
  position: relative;
  padding: 24px 0 32px;
  background: #fff;
}
.lp-partner .logos-group:first-child { padding-top: 4px; }

/* Partner scientifici e accademici: riga a sé, centrata, loghi più grandi (richiesta di Anthony del 16/10) */
.lp-top-logos { padding: 6px 0 20px; border-bottom: 1px solid var(--line); text-align: center; }
.lp-top-logos .logos-label { margin-bottom: 14px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.lp-top-logos .logos-list { justify-content: center; gap: 16px 30px; margin: 0; }
.lp-top-logos [data-logo="unisr"] { --lh: 56px; --lh-d: 72px; }
.lp-top-logos [data-logo="cnpl"] { --lh: 72px; --lh-d: 92px; }
.lp-top-logos [data-logo="cattolica"] { --lh: 72px; --lh-d: 92px; }
@media (min-width: 1000px) {
  .lp-top-logos { padding: 10px 0 28px; }
  .lp-top-logos .logos-label { margin-bottom: 18px; }
  .lp-top-logos .logos-list { gap: 24px 64px; }
}

.lp-ds {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0 14px;
  align-items: center;
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 20px 20px 22px 18px;
  background: var(--air);
}
.lp-ds-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 4px #fff;
}
.lp-ds-label { font-size: 12.5px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; color: var(--teal-ink); }
.lp-ds-name { margin-top: 1px; font-size: 16px; font-weight: 640; line-height: 1.3; letter-spacing: -.01em; }
.lp-ds-meta { margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
/* Sui telefoni il Direttore Sanitario va sopra i loghi, accanto a San Raffaele e CNPL: così nome, ruolo e
   università stanno nelle prime due schermate anche a 360x640 (nel DOM resta dopo i loghi, senza elementi da toccare) */
@media (max-width: 759.98px) {
  .lp-partner > .container { display: flex; flex-direction: column; }
  .lp-partner .lp-ds { order: -1; margin: 0 0 8px; }
}
@media (min-width: 760px) {
  .lp-ds { max-width: 760px; margin: 16px auto 0; padding: 14px 24px 14px 16px; }
}
@media (min-width: 1000px) {
  .lp-partner { padding: 28px 0 44px; }
}


/* 3. «Respira. Rallenta. Calmati.»
   -------------------------------------------------------------------------- */
.lp-ansia-blob { --size: 520px; top: 34%; right: -250px; }
.lp-ansia-grid { display: grid; gap: 28px; }
.lp-ansia-h2 { margin-top: 10px; }
.lp-ansia-prose { margin-top: 18px; }
.lp-ansia-prose p { max-width: 30em; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.lp-ansia-prose p + p { margin-top: 12px; }
.lp-ansia-prose p:last-child { color: var(--ink); font-weight: 450; }
.lp-ansia-close {
  position: relative;
  max-width: 30em;
  padding-left: 18px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
}
.lp-ansia-close::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--grad);
}
@media (min-width: 1000px) {
  .lp-ansia-blob { --size: 600px; top: 50%; right: -120px; margin-top: -280px; }
  .lp-ansia-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "testo card" "chiusura card";
    column-gap: 72px;
    row-gap: 28px;
  }
  .lp-ansia-text { grid-area: testo; align-self: end; }
  .lp-iceberg { grid-area: card; align-self: center; }
  .lp-ansia-close { grid-area: chiusura; align-self: start; }
}


/* 4. Come funziona
   -------------------------------------------------------------------------- */
.lp-fasi > li { padding-bottom: 28px; }
.lp-fasi > li:last-child { padding-bottom: 12px; }
.lp-fase .badge + .h3 { margin-top: 12px; }
.lp-fase-chips { gap: 6px; margin-top: 10px; }
.lp-fase p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* Riquadro per i genitori (versione base e variante genitori) */
.lp-figli {
  margin-top: 28px;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--air);
}
.lp-figli-head { display: flex; align-items: center; gap: 12px; }
.lp-figli-title { font-size: 18px; font-weight: 640; line-height: 1.3; letter-spacing: -.015em; }
.lp-figli-list { gap: 12px; margin-top: 16px; }
.lp-figli-list > li { font-size: 16px; line-height: 1.5; color: var(--ink-2); }

.lp-come-bottom { display: grid; gap: 16px; margin-top: 32px; }
/* Sezione dopo le storie (16/10): niente spazio in più in cima */
.lp-come-dopo > .container > :first-child { margin-top: 0; }
.lp-come-photo { margin-top: 8px; }
.lp-come-cta { margin-top: 8px; }
.lp-come-cta .btn-note { text-align: left; }
@media (max-width: 599.98px) {
  .lp-come-cta .btn-note { text-align: center; }
}
@media (min-width: 1000px) {
  .lp-fasi { margin-top: 8px; }
  .lp-fasi > li,
  .lp-fasi > li:last-child { padding-bottom: 0; }
  .lp-figli {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    margin-top: 48px;
    padding: 26px 32px;
  }
  .lp-figli-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lp-figli-title { font-size: 19px; }
  .lp-figli-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 0; }
  .lp-figli-list > li { font-size: 15.5px; }
  .lp-come-bottom {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-areas: "foto riga" "foto costo" "foto cta";
    grid-template-rows: auto auto 1fr;
    column-gap: 56px;
    row-gap: 18px;
    align-items: start;
    margin-top: 56px;
  }
  .lp-come-row { grid-area: riga; margin-top: 4px; }
  .lp-come-note { grid-area: costo; }
  .lp-come-photo { grid-area: foto; margin-top: 0; }
  .lp-come-cta { grid-area: cta; margin-top: 8px; }
}


/* 5. Storie e recensioni
   -------------------------------------------------------------------------- */
/* Annaclaudia: con il ritaglio comune a destra restava la banda blu della miniatura. Qui la finestra va
   da circa x 300 a x 830 dell'originale: fuori il cartello a sinistra (con un claim vietato), la banda blu
   a destra e la scritta «la voce viva» in basso; il volto resta intero. */
.lp-storie .yt[data-slug="annaclaudia"] { --yt-pos: 100% 50%; --yt-zoom: 1.63; --yt-origin: 61% 20%; }
.lp-storie .container { display: flex; flex-direction: column; gap: 48px; }
.lp-storie .section-head { margin-bottom: -16px; }
.lp-storie-blob { --size: 520px; top: 34%; right: -300px; }
.lp-storie .lead { color: rgba(255, 255, 255, .85); }

/* Riga sotto il carosello (mobile): «Scorri...» e pallini */
.lp-video-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.lp-video-meta .scroll-hint { margin-top: 0; }
.lp-dots { display: flex; flex: none; align-items: center; gap: 6px; }
.lp-dots > span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .34);
  transition: width .2s var(--ease), background-color .2s;
}
.lp-dots > span.is-on { width: 20px; background: var(--aqua); }
@media (min-width: 760px) {
  .lp-video-meta { display: none; }
}

.lp-genitori-video .h3 { color: #fff; }
.lp-genitori-video .video-pair { max-width: 520px; }

.lp-recensioni-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.lp-recensioni-head .h3 { color: #fff; }
.lp-review-scroller { margin-top: 20px; }
.lp-review-scroller:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: var(--r-lg); }
.lp-review-scroller .review { height: 100%; }

.lp-storie-cta { display: grid; justify-items: center; gap: 16px; text-align: center; }
.lp-storie-close { font-size: 17px; font-weight: 500; line-height: 1.45; color: #fff; }
@media (max-width: 599.98px) {
  .lp-storie-cta { justify-items: stretch; }
}
@media (min-width: 1000px) {
  .lp-storie .container { gap: 64px; }
  .lp-storie .section-head { margin-bottom: -20px; }
}


/* 6. Équipe
   -------------------------------------------------------------------------- */
.lp-team { display: grid; gap: 20px; }
.lp-team-side { display: grid; gap: 20px; align-content: start; }
.lp-founder-card .founder-photo img { object-position: 50% 22%; }
/* Video di Giovanni al posto della foto (16/10): copertina con Giovanni a destra, tenuto al centro nei ritagli */
.lp-founder-video { margin: 0; }
.lp-founder-video .yt { --yt-pos: 74% 40%; box-shadow: 0 26px 50px -30px #062f5299; }
@media (min-width: 760px) {
  /* il video sta in cima alla card, a tutta larghezza: piccolo accanto al testo la scritta coprirebbe il viso */
  .lp-founder-card .founder-card { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lp-founder-video .yt { aspect-ratio: 16 / 9; }
}

/* Pulsante del video di Giovanni: facciata con la sua foto, non il cartello finale */
.lp-gv > span { display: block; }
.lp-gv-btn {
  --h: 60px;
  width: 100%;
  justify-content: flex-start;
  gap: 14px;
  padding: 8px 18px 8px 8px;
  border-radius: 18px;
  text-align: left;
  text-wrap: pretty;
}
@media (min-width: 760px) {
  .lp-gv > span { display: inline-block; }
  .lp-gv-btn { --h: 56px; width: auto; padding: 6px 24px 6px 6px; border-radius: 999px; }
}
.lp-gv-thumb {
  /* il volto di Giovanni si vede intero (niente velo); il play è un bollino in basso a destra */
  position: relative;
  display: block;
  flex: none;
  width: 48px;
  height: 48px;
}
.lp-gv-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--teal-light);
  transition: transform .25s var(--ease);
}
.lp-gv-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 2px #fff;
  color: #fff;
}
.btn-outline .lp-gv-badge .i { width: 12px; height: 12px; margin-left: 1px; color: #fff; }
@media (hover: hover) {
  .lp-gv-btn:hover .lp-gv-thumb img { transform: scale(1.08); }
}

.lp-team-label { margin-top: 48px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.lp-person-grid { margin-top: 20px; }
.lp-team-more { margin-top: 14px; }
.lp-facts { margin-top: 40px; }
.lp-research { margin-top: 32px; }
@media (min-width: 1000px) {
  .lp-team { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
  .lp-team-side { gap: 24px; }
  .lp-team-label { margin-top: 56px; }
  .lp-person-grid { margin-top: 24px; }
  .lp-facts { margin-top: 56px; }
}


/* 7. Domande frequenti
   -------------------------------------------------------------------------- */
.lp-domande .section-head { margin-bottom: 24px; }
.lp-citta { --cluster: 6px; }
.lp-addr-btn { margin-block: -6px; }
.js .lp-addr.is-collapsed { display: none; }


/* 8. CTA finale
   -------------------------------------------------------------------------- */
.lp-finale-blob { --size: 300px; top: -130px; right: -150px; }
.lp-finale-p { max-width: 30em; margin-top: 16px; font-size: 18px; line-height: 1.5; color: #fff; }
.lp-finale-steps { margin-top: 28px; }
.lp-finale-action { margin-top: 32px; }
.lp-finale-cta { width: 100%; gap: 10px; }
.lp-finale-cta .i { width: 20px; height: 20px; color: var(--blue); }
.lp-finale-note { margin-top: 10px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .92); text-align: center; }
@media (min-width: 600px) {
  .lp-finale-cta { width: auto; }
  .lp-finale-note { text-align: left; }
}
.lp-contatti { margin-top: 28px; }
.lp-contatti-q { font-size: 15px; font-weight: 500; line-height: 1.4; color: #fff; }
.lp-contatti-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.lp-contatti-btns > .btn { flex: 1 1 auto; }
@media (min-width: 1000px) {
  /* affiancati nella colonna da 460 px */
  .lp-contatti-btns > .btn { --h: 48px; flex: 0 1 auto; padding: 6px 18px; font-size: 15px; }
  .lp-contatti-btns > .btn .i { width: 18px; height: 18px; }
}
.lp-orari { margin-top: 12px; color: #fff; }
@media (min-width: 1000px) {
  .lp-finale-blob { --size: 520px; top: -40px; right: -170px; }
  .lp-finale-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 56px;
    align-items: center;
  }
  .lp-finale-action { margin-top: 0; }
  .lp-finale-steps .step-title { font-size: 17px; }
}


/* 9. Modalità verifica (?verifica=1): etichette leggibili dove lo spazio è stretto
   -------------------------------------------------------------------------- */
/* Segnaposto dei video dei genitori: l'etichetta va sotto la card e prende il suo spazio (niente sovrapposizioni) */
html.vv-verifica .lp-genitori-video [data-verifica]::after {
  position: static;
  width: auto;
  max-width: none;
  margin-top: 8px;
}
/* Logo della Cattolica: etichetta centrata sul logo, così non esce dallo schermo su mobile */
html.vv-verifica .lp-partner .logos-list [data-verifica]::after,
html.vv-verifica .lp-partner .logos-list [data-verifica].vv-lab-r::after {
  left: 50%;
  right: auto;
  max-width: min(280px, calc(100vw - 48px));
  transform: translateX(-50%);
}


/* 10. Senza JavaScript (link «Vedi...» nascosti, tutto aperto) e movimento ridotto
   -------------------------------------------------------------------------- */
html:not(.js) .lp-team-more,
html:not(.js) .lp-addr-btn { display: none; }
html:not(.js) .person-grid.is-collapsed > :nth-child(n+7) { display: block; }

@media (prefers-reduced-motion: reduce) {
  .lp-hero-foto { animation: none !important; }
  .lp-gv-thumb img,
  .lp-dots > span { transition: none; }
}