@media (min-width: 1024px) {

  html:has(.v3h) { overflow-x: clip; }
  body:has(.v3h) { overflow-x: clip; }

  /* niente aria sotto: la pagina finisce con la fascia del piede, da bordo a bordo */
  .app:has(.v3h) { max-width: 1200px; padding: 0 24px 0; }
  .app:has(.v3h) .topbar { position: relative; z-index: 2; padding: 22px 2px 10px; }
  .app:has(.v3h) .topbar .brand img { height: 30px; width: auto; }

  .v3h {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }
  .v3h > * { position: relative; z-index: 1; }

  /* lo sfondo del primo schermo e' l'immagine mostrata nello slider: v3-app.js
     riscrive --hp-bg a ogni cambio, spegnendo e riaccendendo --hp-bg-op per la dissolvenza.
     25/9: e' la versione SFOCATA della foto (*-sfondo.webp, 8-11 KB, data-sfondo in index.html),
     senza velo blu: una luce morbida dietro al riquadro invece della stessa foto ingrandita. */
  .v3h { --hp-bg-max: .9; }
  .v3h::before {
    content: "";
    position: absolute;
    top: -120px; left: 50%; width: 100vw; height: 760px;
    margin-left: -50vw;
    background-image: var(--hp-bg, url("/v3/assets/famiglia-driver-sfondo.webp"));
    background-position: center 40%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: var(--hp-bg-op, var(--hp-bg-max));
    transition: opacity .34s ease;
    z-index: 0;
    pointer-events: none;
  }
  .v3h::after {
    content: "";
    position: absolute;
    top: -120px; left: 50%; width: 100vw; height: 760px;
    margin-left: -50vw;
    background:
      linear-gradient(180deg, rgba(11,16,32,.86) 0%, rgba(11,16,32,.34) 16%, rgba(11,16,32,.58) 58%, var(--bg-deep) 93%),
      linear-gradient(90deg, rgba(11,16,32,.94) 0%, rgba(11,16,32,.82) 34%, rgba(11,16,32,.34) 62%, rgba(11,16,32,.20) 100%);
    z-index: 0;
    pointer-events: none;
  }

  .v3h-hero {
    grid-column: 1; grid-row: 1;
    margin: 0; padding: 10px 0 0;
    background: transparent; overflow: visible;
  }
  .v3h-rating { font-size: 13px; }
  .v3h-h1 { margin-top: 18px; font-size: clamp(42px, 3.85vw, 56px); line-height: 1.03; }
  .hp-sub { margin-top: 18px; font-size: 19px; line-height: 1.55; max-width: 38ch; }

  /* colonna di sinistra: titolo e descrizione (riga 1), garanzie (2), riquadro
     dell'indirizzo (3), voto con le stelle (4); le foto a destra coprono tutte e quattro */
  .v3h > .v3h-start {
    grid-column: 1; grid-row: 3;
    position: static;
    margin-top: 26px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(11,16,32,.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255,255,255,.26);
  }
  .v3h-start:hover { transform: translateY(-2px); }
  .v3h-start-lab { font-size: 13.5px; }
  .v3h-search { padding: 14px; font-size: 15.5px; }
  .v3h-go { padding: 15px 18px; font-size: 16px; }

  .v3h > .hp-guar { grid-column: 1; grid-row: 2; margin-top: 20px; gap: 11px; }
  .v3h > .v3h-rating { grid-column: 1; grid-row: 4; }
  .hp-guar span { font-size: 13.5px; }

  .v3h > .hp-slider {
    grid-column: 2; grid-row: 1 / span 4;
    margin-top: 10px;
    align-self: start;
    position: relative;
  }
  /* senza dito servono le frecce: appaiono avvicinandosi alle immagini */
  .hp-frec {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: calc(50% - 22px); z-index: 3;
    width: 44px; height: 44px; padding: 0; cursor: pointer;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.34);
    background: rgba(11,16,32,.62); color: #fff;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .22s ease, background .22s ease, transform .22s ease;
  }
  .hp-frec-prev { left: 14px; }
  .hp-frec-next { right: 14px; }
  .hp-slider:hover .hp-frec,
  .hp-frec:focus-visible { opacity: 1; }
  .hp-frec:hover { background: rgba(11,16,32,.86); transform: scale(1.06); }
  .hp-frec:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
  html[data-theme="light"] .hp-frec {
    background: rgba(255,255,255,.86); color: #16284A; border-color: rgba(15,23,42,.16);
  }
  html[data-theme="light"] .hp-frec:hover { background: #fff; }
  .hp-track > .v3h-photo { min-height: 500px; }
  /* ombre virate: solo le parti scure delle foto prendono il blu di Fontilio,
     cosi' le immagini stanno insieme al resto senza perdere quello che raccontano */
  .v3h-photo img { filter: saturate(.96) contrast(1.03); }
  .v3h-photo::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(98,173,255,.22), rgba(112,98,255,.30));
    mix-blend-mode: hard-light;
    opacity: .5;
  }
  /* l'ombra in basso deve restare SOPRA il velo: e' lei a tenere leggibile la
     didascalia, e schiarita dal velo il contrasto crollava da 11 a 6,3 */
  .v3h-photo-shade { z-index: 1; }
  .v3h-photo-h { font-size: 22px; }
  .v3h-photo-p { font-size: 14.5px; }

  .v3h > .v3h-sec,
  .v3h > .hp-cards,
  .v3h > .hp-rev,
  .v3h > .v3h-final,
  .v3h > .ft,
  .v3h > .hp-bar { grid-column: 1 / -1; }

  .v3h > .v3h-sec { margin-top: 72px; }
  .v3h-eyebrow2 { justify-content: center; margin-bottom: 20px; }
  .v3h-brand-item { height: 62px; margin-right: 44px; }
  .v3h-brand-item img { height: 34px; max-width: 140px; }

  /* width: min() e non max-width: dentro la griglia i margini automatici stringono
     il blocco al contenuto, e le schede finivano a 664px invece che a 820 */
  .v3h > .hp-cards { width: min(820px, 100%); margin-inline: auto; margin-top: 56px; gap: 14px; }
  /* su monitor si legge da lontano e il pubblico non ha vent'anni: testo piu' grande,
     righe piu' alte e misura piu' corta (una riga oltre i 65 caratteri stanca) */
  .hp-qt { font-size: 17.5px; }
  .hp-qs { font-size: 14px; }
  /* 54ch dello zero valgono circa 67 caratteri veri: dentro il limite di 80 del
     criterio 1.4.8 e nella forbice 60-70 dove l'occhio ritrova la riga senza sforzo */
  .hp-in { font-size: 18px; line-height: 1.68; max-width: 54ch; padding: 2px 20px 26px; }
  /* WCAG 1.4.8 (AAA) chiede fra i paragrafi almeno una volta e mezzo l'interlinea:
     18px x 1,68 = 30,2px di riga, quindi qui servono almeno 46px */
  .hp-faq-q { font-size: 18px; line-height: 1.5; margin-top: 46px; }
  .hp-faq-q:first-child { margin-top: 8px; }
  .hp-li { margin-top: 20px; }
  .hp-li svg { margin-top: 6px; }
  .hp-step-n { width: 26px; height: 26px; font-size: 14px; }
  .hp-price-big { font-size: 34px; }
  .hp-price-tail { font-size: 14.5px; }

  .v3h > .hp-rev { margin-top: 44px; width: min(520px, 100%); margin-inline: auto; }

  /* su monitor l'invito finale esce dalla griglia e prende tutta la finestra:
     e' l'unico blocco della pagina che tocca i bordi, ed e' li' che la fotografia
     di sfondo si sente. overflow-x: clip e' gia' su html e body, quindi 100vw
     non crea la barra orizzontale */
  .v3h > .v3h-final {
    width: 100vw; margin-left: calc(50% - 50vw); margin-inline-end: 0;
    margin-top: 72px; padding: 96px 32px 88px;
  }
  /* il testo si allarga con la finestra ma resta leggibile: la misura di riga
     e la larghezza del bottone restano quelle della card di prima */
  .v3h-final-logo, .v3h-final-h, .v3h-final-p,
  .v3h-final-cta, .v3h-final-citta, .v3h-final .v3h-login { max-width: 640px; margin-inline: auto; }
  .v3h-final-cta { max-width: 360px; }
  .v3h-final-h { font-size: 40px; }
  .v3h-final-p { font-size: 16.5px; max-width: 46ch; margin-inline: auto; }
  .v3h-final-bg img { object-position: center 100%; }
  /* su monitor il testo e' una colonna stretta al centro: l'ovale chiaro del tema chiaro si stringe */
  .v3h-final-bg { --fin-ovale: 58% 66%; }
  .v3h-final .v3h-login { margin-top: 22px; }

  .ft {
    padding: 40px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 48px;
    align-items: start;
  }
  .ft-alto { grid-column: 1; grid-row: 1; max-width: 44ch; align-items: flex-start; }
  .ft-claim { max-width: 42ch; }
  .ft-assistenza {
    grid-column: 2; grid-row: 1; margin-top: 0;
    flex-direction: column; align-items: stretch; gap: 16px;
    min-width: 330px; padding: 22px 24px; border-radius: 18px;
  }
  .ft-ass-info { display: flex; align-items: center; gap: 14px; }
  .ft-ass-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: none; border-radius: 50%;
    background: rgba(120,213,223,.14); color: #8FE3EC;
    border: 1px solid rgba(120,213,223,.30);
  }
  .ft-assistenza .ft-eti { font-size: 11.5px; }
  .ft-assistenza .ft-tel { font-size: 25px; }
  .ft-assistenza .ft-orari { font-size: 13px; }
  .ft-canali { gap: 10px; }
  .ft-canali a {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; padding: 11px 14px; font-size: 13.5px;
  }
  .ft-canali a svg { display: block; flex: none; }

  /* la fascia di mappa e dati legali va da bordo a bordo della finestra, col contenuto
     allineato al resto della pagina (stesso sistema dell'invito finale) */
  .ft-info {
    grid-column: 1 / -1; margin-top: 44px;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0;
    padding: 40px calc(50vw - 50%) 56px;
  }
  .ft-mappa { grid-template-columns: repeat(4, 1fr); gap: 8px 32px; }

  /* i dati societari per esteso: righe piene invece di una colonna stretta e centrata,
     cosi' il piede della pagina si accorcia di parecchio */
  .ft-basso {
    margin-top: 44px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 16px 28px; text-align: left;
  }
  .ft-legale-link { grid-column: 1; justify-content: flex-start; }
  .ft-pagamenti { grid-column: 2; justify-content: flex-end; }
  .ft-societa { grid-column: 1 / -1; max-width: none; font-size: 12px; }
  .ft-marchi { grid-column: 1; max-width: none; }
  .ft-catalogo { grid-column: 2; text-align: right; white-space: nowrap; }
  .ft-tema { grid-column: 1 / -1; justify-self: center; margin-top: 8px; }

  .hp-bar { display: none !important; }
}

@media (min-width: 1024px) {
  html[data-theme="light"] .v3h-hero { background: transparent; }
  html[data-theme="light"] .v3h { --hp-bg-max: .42; }

  /* di giorno il velo lavora al contrario: schiarisce invece di scurire */
  html[data-theme="light"] .v3h-photo img { filter: saturate(.98) brightness(1.05); }
  html[data-theme="light"] .v3h-photo::before {
    background: linear-gradient(180deg, rgba(154,216,255,.42), rgba(207,244,248,.34));
    mix-blend-mode: screen;
    opacity: .55;
  }
  html[data-theme="light"] .v3h::before {
    background-image:
      linear-gradient(180deg, rgba(154,216,255,.42), rgba(207,244,248,.34)),
      var(--hp-bg, url("/v3/assets/famiglia-driver-sfondo.webp"));
    background-blend-mode: screen, normal;
    background-position: center 40%, center 40%;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
  }
  html[data-theme="light"] .v3h::after {
    background:
      linear-gradient(180deg, rgba(231,236,243,.80) 0%, rgba(231,236,243,.46) 16%, rgba(231,236,243,.72) 52%, var(--bg-deep) 84%),
      linear-gradient(90deg, rgba(231,236,243,1) 0%, rgba(231,236,243,.99) 40%, rgba(231,236,243,.52) 64%, rgba(231,236,243,.26) 100%);
  }
  html[data-theme="light"] .v3h > .v3h-start {
    background: rgba(255,255,255,.92);
    border-color: rgba(15,23,42,.14);
    box-shadow: 0 14px 34px rgba(15,23,42,.10);
  }
  /* la banda fotografica smorza di un soffio il fondo sotto le garanzie: senza questo
     scatto di tinta il contrasto resta a 6,96 e non arriva al 7:1 del livello AAA */
  html[data-theme="light"] .hp-guar span { color: #3E4859; }
}