/* Il foglio del sito, portato dal mockup v3 approvato (docs/mockup-v3.html). Si corregge qui, non nel mockup. */

  /* Gemello di Humatic: valori copiati una volta dal suo sistema (misure, caratteri, toni,
     pulsanti, testata). Nessun legame col suo codice. L'accento corallo e' di TrendRush. */
  :root {
    --fondo: #E7E4DE; --fondo-vetro: rgba(231, 228, 222, 0.82);
    --carta: #DAD6CE; --carta-2: #CFCBC3; --carta-3: #C4C0B8;
    --testo: #171614; --spento: #5F5B54; --filo: #C9C5BD; --scuro: #292929; --scuro-2: #3D3D3D; --chiaro: #F2EFE9;
    --accento: #D97757; --accento-tocco: #EE7D58; /* hover del corallo: piu' acceso, non piu' scuro */ --su-accento: #171614;
    --font: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
    --t-display: clamp(40px, 5vw, 64px); --t-maintitle: 32px; --t-titolo: 22px; --t-body: 16px; --t-etichetta: 12px;
    --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-6: clamp(48px, 6vw, 64px);
    --r-card: 12px; --r-campo: 8px; --r-pillola: 999px;
    --testata: 76px;
    --transizione: 160ms ease;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: var(--font); font-size: var(--t-body); line-height: 1.65; background: var(--fondo); color: var(--testo); }
  a { color: inherit; }

  /* testata come quella di Humatic (frontend/src/pages/vetrina/Cornice.jsx e styles/vetrina.css), a tre fasi:
     «naturale» in cima, nel flusso, esce con la pagina in discesa senza animazioni; «fissata» in risalita riappare
     fissa in cima entrando dall'alto (.25s); «uscita» se a meta' pagina si torna a scendere sparisce verso l'alto e
     resta assente fino alla prossima risalita. La pillola ha il greige di Humatic (#E7E4DE), lo stesso del fondo: in
     cima non si vede, si vede solo quando ritorna fissata e diventa vetro, greige al 72% con la sfocatura. */
  #testata { position: relative; z-index: 20; padding: var(--sp-1) var(--sp-4); }
  #testata.fissata, #testata.uscita { position: fixed; top: 0; left: 0; right: 0; }
  #testata.fissata { animation: testata-appare-da-sopra .25s ease-out; }
  #testata.uscita { animation: testata-sparisce-in-alto .25s ease-out forwards; }
  @keyframes testata-appare-da-sopra { from { transform: translateY(-100%); } to { transform: none; } }
  @keyframes testata-sparisce-in-alto { from { transform: none; } to { transform: translateY(-100%); } }
  .testata { max-width: calc(1360px - 2 * var(--sp-4)); margin: 0 auto; height: 56px; padding: 0 var(--sp-1) 0 var(--sp-3); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3); background: #E7E4DE; border-radius: var(--r-pillola); }
  @supports ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {
    #testata.fissata .testata, #testata.uscita .testata { background: rgba(231, 228, 222, 0.72); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
  }
  /* il logo: lockup L1 di design_references/logo/set (gap = 0,22 del segno) */
  .marchio { --mark: 32px; display: flex; align-items: center; gap: calc(var(--mark) * 0.22); font-size: calc(var(--mark) * 0.69); letter-spacing: -0.03em; text-decoration: none; color: var(--testo); }
  .segno { width: var(--mark); height: var(--mark); display: block; flex: none; }
  .marchio b { font-weight: 800; }
  .marchio span { font-weight: 200; }
  .logo-humatic { --mark: 20px; margin-bottom: var(--sp-2); }
  nav { display: flex; gap: var(--sp-4); }
  /* la sottolineatura di Humatic: al passaggio si allunga da sinistra (2px, .2s); la voce della pagina aperta e' piena
     e ferma */
  nav a { color: var(--testo); text-decoration: none; padding-bottom: 5px; background-image: linear-gradient(var(--testo), var(--testo)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size .2s ease-out; }
  nav a:hover { background-size: 100% 2px; }
  nav a.attiva { background-size: 100% 2px; transition: none; font-weight: 500; }
  /* il tondo con le tre barrette e il menu a tutto schermo: solo sul telefono, come in Humatic */
  .hamburger { display: none; }
  /* il menu a tutto schermo come quello di Humatic (styles/vetrina.css): fondo scuro, voci grandi in alto, la zona
     della persona in basso dopo il filo; fra ogni gradino lo stesso passo (32px), e il vuoto elastico sta in mezzo */
  .menu-schermo { --menu-passo: var(--sp-4); position: fixed; inset: 0; z-index: 30; background: var(--scuro); color: var(--chiaro); display: flex; flex-direction: column; padding: var(--sp-3) var(--sp-4) 40px; overflow-y: auto; opacity: 0; transform: translateY(-12px); pointer-events: none; visibility: hidden; transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s; }
  .menu-schermo.aperto { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .28s ease, transform .28s ease; }
  .menu-schermo .menu-testa { display: flex; align-items: center; justify-content: space-between; }
  .menu-schermo .marchio { --mark: 28px; color: var(--chiaro); }
  .menu-schermo .chiudi { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--scuro-2); color: var(--chiaro); font-size: var(--t-body); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .menu-schermo .menu-voci { display: flex; flex-direction: column; gap: calc(var(--menu-passo) - var(--sp-1)); margin: var(--menu-passo) 0; }
  .menu-schermo .menu-voci a, .menu-schermo .menu-persona-area { align-self: flex-start; width: fit-content; color: var(--chiaro); text-decoration: none; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; padding-bottom: var(--sp-1); background-image: linear-gradient(var(--accento), var(--accento)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 4px; transition: background-size .2s ease-out; }
  .menu-schermo .menu-voci a:hover, .menu-schermo .menu-persona-area:hover, .menu-schermo .menu-voci a.attiva { background-size: 100% 4px; }
  .menu-schermo .menu-voci a.attiva { transition: none; }
  .menu-schermo .menu-zona-persona { margin-top: auto; padding-top: var(--menu-passo); border-top: 1px solid rgba(242, 239, 233, 0.22); }
  .menu-schermo .menu-azioni { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .menu-schermo .menu-azioni .btn:not(.btn-accento) { color: var(--chiaro); border-color: var(--chiaro); }
  .menu-schermo .menu-azioni .btn:not(.btn-accento):hover { background: var(--chiaro); color: var(--testo); }
  .menu-schermo .menu-persona { display: flex; flex-direction: column; }
  .menu-schermo .menu-persona-identita { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; }
  .menu-schermo .persona-tondo { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--chiaro); background: var(--chiaro); color: var(--testo); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
  .menu-schermo .menu-persona-ripiego { color: rgba(242, 239, 233, 0.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-schermo .menu-persona-area { margin-top: var(--menu-passo); }
  .menu-schermo .menu-persona-esci { border: none; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 15px; text-align: left; color: rgba(242, 239, 233, 0.72); align-self: flex-start; margin-top: calc(var(--menu-passo) - var(--sp-1)); }
  .menu-schermo .menu-persona-esci:hover { color: var(--chiaro); }
  .destra { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }

  .btn { font-family: var(--font); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); border: 1px solid var(--testo); background: transparent; color: var(--testo); min-height: 44px; padding: 0 var(--sp-3); border-radius: var(--r-pillola); font-size: var(--t-body); font-weight: 500; cursor: pointer; text-decoration: none; transition: background var(--transizione), color var(--transizione), transform var(--transizione); }
  .btn:hover { background: var(--testo); border-color: var(--testo); color: var(--chiaro); } /* il contorno, al passaggio, si riempie di inchiostro */
  .btn:active { transform: scale(0.98); }
  .btn-primario { background: var(--testo); color: var(--chiaro); }
  .btn-primario:hover { background: var(--scuro-2); }
  .btn-accento { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
  .btn-accento:hover { background: var(--accento-tocco); border-color: var(--accento-tocco); color: var(--su-accento); }
  .btn[disabled] { border-color: var(--filo); color: var(--spento); cursor: not-allowed; background: transparent; }
  .link { color: var(--testo); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

  /* apertura */
  .apertura { max-width: 1360px; margin: 0 auto; padding: var(--sp-6) var(--sp-4); text-align: right; }
  .apertura h1 { font-size: var(--t-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
  .apertura p { color: var(--spento); max-width: 58ch; margin: var(--sp-3) 0 0 auto; }
  /* il video di fondo: il nostro (montato in DaVinci), con le regole della card di apertura di Humatic.
     Muto e in ciclo, sotto il testo; il testo sta a destra perche' la persona e' nella meta' sinistra.
     Resta invisibile finche' non parte; a chi ha ridotto le animazioni si mostra il fotogramma fermo;
     sotto i 980 si spegne e la hero resta solo testo. */
  .apertura.con-video { position: relative; margin: var(--sp-6) auto; padding: 0 var(--sp-4); min-height: min(62vh, 640px);
    display: flex; justify-content: flex-end; align-items: center; }
  .apertura .video-fondo, .apertura .posa-fondo { position: absolute; top: 0; bottom: 0; left: var(--sp-4); width: calc(100% - 2 * var(--sp-4));
    height: 100%; object-fit: cover; object-position: 50% 12%; border-radius: 24px; z-index: 0; pointer-events: none; }
  .apertura .posa-fondo { display: none; }
  .apertura .video-fondo[data-pronto="no"] { opacity: 0; }
  .apertura .video-fondo[data-pronto="si"] { opacity: 1; transition: opacity 180ms ease-out; }
  .apertura .testo { position: relative; z-index: 1; max-width: 46%; padding: var(--sp-6) var(--sp-4) var(--sp-6) 0; }
  /* nella meta' libera il titolo sta su tre righe solo fino a 54px: la riga piu' lunga misura 10,3 volte il corpo */
  .apertura.con-video h1 { font-size: clamp(36px, 3.7vw, 54px); }
  @media (prefers-reduced-motion: reduce) { .apertura .video-fondo { display: none; } .apertura .posa-fondo { display: block; } }
  @media (max-width: 980px) {
    .apertura.con-video { display: block; min-height: 0; margin: 0 auto; padding: var(--sp-6) var(--sp-4); }
    .apertura .video-fondo, .apertura .posa-fondo { display: none; }
    .apertura .testo { max-width: none; padding: 0; }
    .apertura.con-video h1 { font-size: var(--t-display); }
  }
  .titolo-pagina { max-width: 1360px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-3); }
  .titolo-pagina h1 { font-size: var(--t-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
  .titolo-pagina p { color: var(--spento); max-width: 62ch; margin-top: var(--sp-2); }

  /* impaginato a tre colonne con le laterali ferme */
  .impaginato { max-width: 1360px; margin: 0 auto; padding: 0 var(--sp-4) var(--sp-4); display: grid; grid-template-columns: 260px 1fr 300px; gap: var(--sp-3); align-items: start; }
  .laterale { position: sticky; top: calc(var(--testata) + var(--sp-3)); }
  .impaginato.due { grid-template-columns: 1fr 300px; }
  .impaginato.uno { grid-template-columns: minmax(0, 1fr); }
  @media (max-width: 1100px) { .impaginato, .impaginato.due { grid-template-columns: minmax(0, 1fr); } .laterale { position: static; } .testata { grid-template-columns: 1fr auto; } .testata nav { display: none; } }

  .riquadro { background: var(--carta); border-radius: var(--r-card); padding: var(--sp-3); margin-bottom: var(--sp-3); }
  .etichetta-sezione { font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; color: var(--spento); margin-bottom: var(--sp-2); }
  .fonte { display: flex; justify-content: space-between; padding: var(--sp-1) 0; border-bottom: 1px solid var(--filo); }
  .fonte:last-child { border-bottom: none; }
  .segnaposto { color: var(--spento); font-style: italic; }
  .nota { font-size: var(--t-etichetta); color: var(--spento); margin-top: var(--sp-2); line-height: 1.5; }

  /* filtri */
  .filtri { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-3); }
  .filtro { font-family: var(--font); font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.07em; border: 1px solid var(--filo); background: transparent; color: var(--spento); border-radius: var(--r-pillola); padding: 6px var(--sp-2); cursor: pointer; transition: all var(--transizione); }
  .filtro:hover { border-color: var(--testo); color: var(--testo); }
  .filtro.acceso { background: var(--testo); border-color: var(--testo); color: var(--chiaro); }

  /* le opportunita' */
  .opportunita { display: block; background: var(--carta); border-radius: var(--r-card); padding: var(--sp-4); margin-bottom: var(--sp-3); text-decoration: none; color: inherit; transition: background var(--transizione), transform var(--transizione); }
  a.opportunita:hover { background: var(--carta-2); transform: translateY(-2px); }
  .testa { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .codice { font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.07em; color: var(--spento); }
  .stato { font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; padding: 4px var(--sp-2); border-radius: var(--r-pillola); white-space: nowrap; }
  .disponibile { background: var(--accento); color: var(--su-accento); }
  .assegnata { background: var(--carta-3); color: var(--spento); }
  .tua { background: var(--testo); color: var(--chiaro); }
  .opportunita h2 { font-size: var(--t-titolo); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; margin-top: 4px; }
  .sintesi { margin-bottom: var(--sp-2); }
  .meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.07em; color: var(--spento); border-top: 1px solid var(--filo); padding-top: var(--sp-2); }
  .meta b { color: var(--testo); font-weight: 500; }
  /* il testo nascosto: una barra tono su tono per riga, lunga quanto la riga vera. Ferme, mai animate */
  .opportunita.bloccata { cursor: default; }
  .maschera { display: flex; flex-direction: column; }
  .maschera i { display: block; height: 10px; background: var(--carta-3); border-radius: 3px; }
  .maschera.titolo { gap: 10px; margin: 10px 0 4px; }
  .maschera.titolo i { height: 17px; }
  .maschera.testo { gap: 16px; margin: 8px 0 calc(var(--sp-2) + 8px); }
  .maschera.piccola { gap: 8px; margin: 6px 0 4px; }
  .maschera.piccola i { height: 9px; }
  .barretta { display: inline-block; width: 92px; height: 9px; vertical-align: middle; margin: 0 6px; background: var(--carta-3); border-radius: 3px; }
  /* nascosto perche' non sei entrato: sopra le barre, al centro, la chiave */
  .mascherata { position: relative; }
  .serratura { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .serratura > div { width: 100%; background: var(--dietro, var(--carta)); padding: var(--sp-2) var(--sp-3); text-align: center; }
  .serratura.in-fila { position: static; padding: var(--sp-3) 0 0; }
  .serratura > div h3 { color: var(--testo); font-size: var(--t-titolo); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: var(--sp-2); }
  .serratura .nota { margin-top: var(--sp-1); }

  /* il dettaglio */
  .indietro { display: inline-flex; gap: var(--sp-1); margin-bottom: var(--sp-3); color: var(--spento); text-decoration: none; }
  .indietro:hover { color: var(--testo); }
  .sezione { margin-top: var(--sp-4); }
  .sezione h3 { font-size: var(--t-titolo); font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--sp-2); }
  .fonti-lista { list-style: none; }
  .fonti-lista li { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px solid var(--filo); }
  .fonti-lista li:last-child { border-bottom: none; }
  .fonti-lista .tipo { font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.07em; color: var(--spento); padding-top: 3px; }
  .curva { display: flex; align-items: flex-end; gap: 6px; height: 96px; padding: var(--sp-2); background: var(--carta-2); border-radius: var(--r-campo); }
  .curva span { flex: 1; background: var(--testo); border-radius: 3px 3px 0 0; opacity: 0.85; transition: opacity var(--transizione); }
  .curva span:last-child { background: var(--accento); opacity: 1; }
  .curva:hover span { opacity: 0.6; }
  .curva:hover span:hover { opacity: 1; }
  .barra-azioni { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--filo); }
  .azioni { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
  .riga { display: block; padding: var(--sp-1) 0; border-bottom: 1px solid var(--filo); text-decoration: none; }
  .riga:last-child { border-bottom: none; }
  a.riga:hover .riga-titolo { text-decoration: underline; text-underline-offset: 3px; }
  /* nella tua area il titolo della scheda presa ha la misura dei titoli delle schede */
  .titolo-presa { font-size: var(--t-titolo); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; margin-top: 4px; }
  .quando { font-size: var(--t-etichetta); color: var(--spento); }

  /* metodo */
  #btn-area { white-space: nowrap; }
  @media (max-width: 600px) { #btn-area { padding: 0 var(--sp-2); } }
  .confronto-carte { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .carta-confronto { border-radius: var(--r-card); padding: var(--sp-4); }
  .carta-confronto.loro { background: var(--carta); color: var(--spento); }
  .carta-confronto.nostra { background: var(--testo); color: var(--chiaro); }
  .carta-confronto .intestazione { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; margin-bottom: var(--sp-3); }
  .carta-confronto .loghi { display: inline-flex; gap: var(--sp-1); }
  .carta-confronto .loghi svg { width: 28px; height: 28px; display: block; }
  .carta-confronto.loro .loghi { color: var(--testo); }
  .carta-confronto ul { list-style: none; }
  .carta-confronto li { padding: var(--sp-2) 0; border-top: 1px solid var(--filo); }
  .carta-confronto.nostra li { border-top-color: var(--scuro-2); font-weight: 800; letter-spacing: -0.01em; }
  .carta-confronto .voce { display: block; font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; opacity: .7; margin-bottom: 2px; }
  @media (max-width: 700px) { .confronto-carte { grid-template-columns: 1fr; } }
  /* home v3: una colonna sola. L'esempio intero, la fascia col bottone, l'elenco della settimana */
  .impaginato.home { padding-top: 0; }
  /* il bottone della hero: le misure di quello di Humatic (48 di altezza, pillola nera, hover chiaro col testo scuro, 40-48 sopra) */
  .azioni-hero { display: flex; justify-content: flex-end; margin-top: clamp(40px, 5vw, 48px); }
  .btn-hero { min-height: 48px; border: none; background: var(--testo); color: var(--chiaro); transition: background-color .15s ease, color .15s ease; }
  .btn-hero:hover { background: var(--chiaro); color: var(--testo); }
  /* senza il video (sotto i 980px) la fascia d'apertura si centra, come quella di Humatic sul telefono: titolo, testo e
     pulsante sulla stessa linea di mezzo (nel mockup il testo stava a destra e il pulsante a sinistra) */
  @media (max-width: 980px) {
    .apertura.con-video { text-align: center; }
    .apertura.con-video p { margin-left: auto; margin-right: auto; }
    .azioni-hero { justify-content: center; }
  }
  .centro > .etichetta-sezione { margin: var(--sp-6) 0 var(--sp-3); }
  .centro > .etichetta-sezione:first-child { margin-top: 0; }
  /* come funziona: il numero fa parte dell'inizio in grassetto di ogni passo */
  .riquadro.funziona { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
  .come-funziona { list-style: none; margin-top: var(--sp-1); }
  .come-funziona li { padding: var(--sp-2) 0; line-height: 1.45; color: var(--spento); }
  .come-funziona li + li { border-top: 1px solid var(--filo); }
  .come-funziona b { display: block; color: var(--testo); font-weight: 800; letter-spacing: -0.02em; font-size: 17px; line-height: 1.25; margin-bottom: 2px; }
  .riquadro.funziona .btn { width: 100%; margin-top: var(--sp-2); }
  /* il banner di Humatic: la foto della ragazza con la scarpa (still del video di Humatic), sotto il quasi-nero col logo chiaro */
  .banner-humatic { display: block; border-radius: var(--r-card); overflow: hidden; background: var(--testo); color: var(--chiaro); text-decoration: none; margin-bottom: var(--sp-3); }
  /* la foto respira: sotto il fotogramma fermo, sopra il video in loop della brezza (entra quando parte;
     chi ha ridotto le animazioni vede solo il fotogramma) */
  .banner-media { position: relative; aspect-ratio: 15 / 16; }
  .banner-humatic img, .banner-video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .banner-video { position: absolute; inset: 0; }
  .banner-video[data-pronto="no"] { opacity: 0; }
  .banner-video[data-pronto="si"] { opacity: 1; transition: opacity 180ms ease-out; }
  @media (prefers-reduced-motion: reduce) { .banner-video { display: none; } }
  .banner-humatic .dentro-banner { padding: var(--sp-3); }
  .banner-humatic .logo-humatic { color: var(--chiaro); margin-bottom: var(--sp-2); }
  .banner-humatic p { font-size: var(--t-titolo); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: var(--sp-3); }
  .banner-humatic .btn { background: var(--chiaro); border-color: var(--chiaro); color: var(--testo); }
  .banner-humatic:hover .btn { background: var(--carta); border-color: var(--carta); color: var(--testo); }
  /* al telefono prima l'esempio, poi le colonne */
  @media (max-width: 1100px) { .impaginato.home .centro, .impaginato.elenco .centro { order: -1; } }
  .intera { background: var(--carta); border-radius: var(--r-card); padding: var(--sp-4); }
  .intera > h2 { font-size: var(--t-maintitle); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin: 4px 0 var(--sp-2); }
  .intera h3 { font-size: var(--t-titolo); font-weight: 800; letter-spacing: -0.03em; margin: var(--sp-4) 0 var(--sp-1); }
  .intera ul { list-style: none; }
  .segnale { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px solid var(--filo); }
  .segnale:last-child { border-bottom: 0; }
  .segnale .tipo { font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.07em; color: var(--spento); padding-top: 3px; }
  .segnale .fonte-link { font-size: var(--t-etichetta); color: var(--spento); line-height: 1.5; margin-top: 2px; }
  .banda { background: var(--carta); border-radius: var(--r-card); padding: var(--sp-4); text-align: center; margin: var(--sp-4) 0 0; }
  .banda h2 { font-size: var(--t-maintitle); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--sp-2); }
  .banda p { color: var(--spento); max-width: 56ch; margin: 0 auto var(--sp-3); }
  .compatta { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: center; background: var(--carta); border-radius: var(--r-card); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-1); }
  .compatta .maschera { flex: 1; margin: 0; }
  @media (max-width: 600px) { .segnale { grid-template-columns: 1fr; gap: 0; } .intera, .banda { padding: var(--sp-3); } }
  /* al telefono: la pillola dello stato va a capo sotto il titolo lungo, la tabella stringe i margini */
  @media (max-width: 600px) { .testa { flex-wrap: wrap; } }

  /* area personale */
  .contatore { display: flex; align-items: baseline; gap: var(--sp-1); }
  .contatore b { font-size: var(--t-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
  .prompt { background: var(--scuro); color: var(--chiaro); border-radius: var(--r-campo); padding: var(--sp-3); font-family: ui-monospace, Menlo, monospace; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }

  /* finestra e avviso */
  .velo { position: fixed; inset: 0; background: rgba(23, 22, 20, 0.45); display: none; align-items: center; justify-content: center; z-index: 50; padding: var(--sp-2); }
  .velo.aperto { display: flex; }
  .finestra { background: var(--fondo); border-radius: 24px; padding: var(--sp-4); max-width: 460px; width: 100%; animation: sale 180ms ease; }
  .finestra h2 { font-size: var(--t-maintitle); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: var(--sp-2); }
  .campo { display: block; margin-top: var(--sp-2); }
  .campo span { display: block; font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.07em; color: var(--spento); margin-bottom: 4px; }
  .campo input { width: 100%; font-family: var(--font); font-size: var(--t-body); padding: 12px var(--sp-2); border: 1px solid var(--filo); border-radius: var(--r-campo); background: var(--chiaro); }
  /* il campo attivo ha il bordo corallo di TrendRush, non il blu del browser */
  .campo input:focus, .campo input:focus-visible { outline: none; border-color: var(--accento); box-shadow: 0 0 0 2px var(--accento); }
  @keyframes sale { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
  /* v2: la finestra d'accesso, la porta della scheda, l'idea di oggi */
  /* il pulsante d'accesso con Google secondo le regole grafiche di Google: la G ufficiale a quattro colori, fondo bianco,
     bordo grigio sottile (#747775), testo scuro (#1F1F1F); al passaggio un velo grigio leggero. La pillola e' ammessa */
  .btn-google { width: 100%; justify-content: center; gap: 12px; margin-top: var(--sp-2); background: #fff; border: 1px solid #747775; color: #1F1F1F; font-weight: 500; }
  .btn-google:hover { background: #F2F2F2; color: #1F1F1F; border-color: #747775; }
  .btn-google .g { width: 20px; height: 20px; flex: none; display: block; }
  .oppure { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; color: var(--spento); font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.07em; }
  .oppure::before, .oppure::after { content: ""; flex: 1; border-top: 1px solid var(--filo); }
  .porta { background: var(--fondo); border-radius: var(--r-card); padding: var(--sp-3); margin: var(--sp-3) 0; }
  .porta.centrata { text-align: center; }
  .porta.centrata .azioni { justify-content: center; }
  .porta h3 { font-size: var(--t-titolo); font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--sp-1); }
  .scheda-chiusa-corpo { margin-top: var(--sp-3); }
  .scheda-chiusa-corpo h3 { color: var(--spento); }
  .oggi-etichetta { display: inline-block; font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; color: var(--accento); margin-bottom: 4px; }
  .opportunita.oggi { box-shadow: inset 0 0 0 2px var(--accento); }
  .conferma-punti { margin: var(--sp-2) 0 0 18px; line-height: 1.6; }
  .toast { position: fixed; bottom: var(--sp-4); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--testo); color: var(--chiaro); padding: 12px var(--sp-3); border-radius: var(--r-pillola); opacity: 0; transition: all 200ms ease; z-index: 60; pointer-events: none; }
  .toast.visibile { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* il piede: lo stesso di Humatic. Il marchio, poi quattro colonne col loro titoletto, poi la barra col copyright e il logo */
  footer { margin-top: var(--sp-6); }
  .piede-sito { max-width: 1360px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-4); }
  .piede-griglia { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
  .piede-brand .marchio { --mark: clamp(24px, 7vw, 40px); }
  /* le icone nella colonna TrendRush, sotto Cookie: Facebook e l'email, nello stile del piede di Humatic. Tessera 2-22 raggio 3,
     simbolo scavato; la busta e' quella di Humatic, la f e' RemixIcon 4.9.1 facebook-box-fill. Per ora non portano da nessuna parte */
  .social-riga { display: flex; gap: var(--sp-1); margin-top: var(--sp-1); }
  .social-tasto { display: inline-flex; color: var(--testo); }
  .social-tasto svg { display: block; }
  .piede-colonna { display: flex; flex-direction: column; gap: var(--sp-1); }
  .piede-colonna .k { font-size: var(--t-etichetta); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--spento); margin-bottom: var(--sp-1); }
  .piede-colonna a { color: var(--testo); text-decoration: none; font-size: var(--t-body); align-self: flex-start; padding-bottom: 4px; cursor: pointer;
    background-image: linear-gradient(var(--accento), var(--accento)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size .2s ease-out; }
  .piede-colonna a:hover { background-size: 100% 2px; }
  .piede-ai { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); }
  .tasto-ai { display: inline-flex; color: var(--testo); --greige: var(--fondo); transition: color .15s ease; }
  .tasto-ai:hover { color: var(--spento); }
  .tasto-ai svg { display: block; }
  .piede-barra { display: flex; justify-content: center; align-items: center; gap: 10px; border-top: 1px solid var(--filo); margin-top: var(--sp-6); padding-top: var(--sp-3); }
  .piede-barra .copy { font-size: 12px; font-weight: 200; color: var(--testo); }
  .piede-barra .marchio { --mark: 14px; }
  @media (max-width: 980px) { .piede-griglia { grid-template-columns: 1fr; gap: var(--sp-4); } }
  .pagina { display: none; }
  .pagina.attiva { display: block; animation: compare 200ms ease; }
  @keyframes compare { from { opacity: 0; } to { opacity: 1; } }
  /* ===== il passo successivo: una colonna sola ===== */
  .colonna { max-width: 1360px; margin: 0 auto; padding: 0 var(--sp-4); }
  .blocco { margin-top: var(--sp-6); }
  .blocco > h2 { font-size: var(--t-maintitle); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--sp-3); }

  /* la card di apertura col video di Humatic */
  .apertura-humatic { position: relative; overflow: hidden; padding: var(--sp-6) var(--sp-4); min-height: min(62vh, 560px); display: flex; justify-content: flex-end; align-items: center; }
  .apertura-humatic .video-fondo, .apertura-humatic .posa-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; z-index: 0; pointer-events: none; }
  .apertura-humatic .posa-fondo { display: none; }
  .apertura-humatic .video-fondo[data-pronto="no"] { opacity: 0; }
  .apertura-humatic .video-fondo[data-pronto="si"] { opacity: 1; transition: opacity 180ms ease-out; }
  .apertura-humatic .testo { position: relative; z-index: 1; max-width: 46%; }
  /* il titolo come quello della hero di TrendRush */
  .apertura-humatic h1 { font-size: clamp(36px, 3.7vw, 54px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: var(--sp-3); }
  @media (prefers-reduced-motion: reduce) { .apertura-humatic .video-fondo { display: none; } .apertura-humatic .posa-fondo { display: block; } }
  @media (max-width: 980px) {
    .apertura-humatic { display: block; min-height: 0; padding: var(--sp-3); }
    .apertura-humatic .video-fondo, .apertura-humatic .posa-fondo { display: none; }
    .apertura-humatic .testo { max-width: none; }
    .apertura-humatic h1 { font-size: var(--t-display); }
  }

  /* 1. il percorso: quattro tappe in fila */
  .percorso { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
  .percorso li { background: var(--carta); border-radius: var(--r-card); padding: var(--sp-3); color: var(--spento); line-height: 1.5; }
  .percorso li b { display: block; color: var(--testo); font-weight: 800; letter-spacing: -0.02em; font-size: 17px; line-height: 1.25; margin-bottom: var(--sp-1); }
  .percorso .num { display: block; font-size: var(--t-etichetta); letter-spacing: 0.07em; color: var(--spento); margin-bottom: var(--sp-2); }
  .percorso li.humatic { background: var(--testo); color: rgba(242, 239, 233, 0.75); }
  .percorso li.humatic b { color: var(--chiaro); }
  .percorso li.humatic .num { color: var(--accento); }
  @media (max-width: 900px) { .percorso { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .percorso { grid-template-columns: 1fr; } }

  /* knowledge hub: le tappe del percorso dall'idea al mercato, con la grammatica delle tappe del passo successivo
     (chiare quelle di TrendRush, scure quelle che vengono da Humatic). Ogni tappa ha la copertina della sua guida;
     niente sottolineature: si clicca la tappa intera, le guide in piu' sono righe semplici */
  .percorso.hub { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .percorso.hub li { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
  .percorso.hub .tappa { display: block; color: inherit; text-decoration: none; }
  .percorso.hub .copertina { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 78% 50%; background: var(--carta-2); }
  .percorso.hub .copertina.foto { object-position: 50% 30%; }
  .percorso.hub .corpo { padding: var(--sp-3); }
  .percorso.hub .titolo-guida { display: block; line-height: 1.4; }
  .percorso.hub .tappa:hover b { text-decoration: underline; text-underline-offset: 3px; }
  /* al passaggio la copertina si avvicina dentro la sua cornice, come le guide vicine (1,05 in .35s) */
  .percorso.hub .copertina-cornice { display: block; overflow: hidden; }
  .percorso.hub .copertina { transition: transform .35s ease; }
  .percorso.hub .tappa:hover .copertina { transform: scale(1.05); }
  .percorso.hub .corpo b { display: block; font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; margin: 4px 0 6px; }
  @media (prefers-reduced-motion: reduce) { .percorso.hub .copertina { transition: none; } }
  .percorso.hub .anche { margin: auto var(--sp-3) 0; padding: var(--sp-2) 0 var(--sp-3); border-top: 1px solid var(--filo); font-size: var(--t-etichetta); }
  .percorso.hub li.humatic .anche { border-top-color: rgba(242, 239, 233, 0.15); }
  .percorso.hub .anche a, .hub-gruppi a { display: block; color: inherit; text-decoration: none; line-height: 1.4; padding: 4px 0; }
  .percorso.hub .anche a::before { content: "+ "; color: var(--accento); }
  .percorso.hub .anche a:hover, .hub-gruppi a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .hub-gruppi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .hub-gruppi .riquadro { margin-bottom: 0; }
  .hub-gruppi a { color: var(--testo); padding: var(--sp-1) 0; border-top: 1px solid var(--filo); }
  .hub-gruppi .etichetta-sezione + a { border-top: 0; }
  .hub-gruppi .nota { margin-top: var(--sp-2); }
  #p-knowledge-hub .colonna { padding-bottom: var(--sp-6); }

  /* la singola guida: la copertina larga con la persona a destra e il titolo a sinistra, l'indice fermo accanto al
     testo, l'invito dopo la sezione dove la guida parla di trovare le persone, il percorso e le guide vicine in fondo */
  /* la copertina e' una card, come nelle guide di Humatic: dentro la colonna, angoli tondi, l'immagine intera
     (1600x858, la persona a destra), il titolo sulla meta' sinistra che la foto lascia vuota */
  .guida-testata { margin-top: var(--sp-3); aspect-ratio: 1600 / 560; border-radius: 24px; overflow: hidden; background: var(--carta-2) right 22% / cover no-repeat; display: flex; align-items: center; padding: 0 var(--sp-6); }
  .guida-testata .testo { max-width: 44%; }
  .guida-testata h1 { font-size: clamp(32px, 3.4vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
  .guida-briciole { font-size: var(--t-etichetta); letter-spacing: 0.07em; text-transform: uppercase; color: var(--spento); margin-bottom: var(--sp-3); }
  .guida-briciole a { color: inherit; }
  .guida-impaginato { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-4); padding-block: var(--sp-6) 0; }
  /* a destra, una colonna sola: in alto l'indice, sotto il banner di Humatic che resta fermo mentre si scorre */
  .guida-laterale { align-self: stretch; }
  .guida-indice { margin-bottom: var(--sp-4); }
  .guida-banner { position: sticky; top: calc(var(--testata) + var(--sp-3)); }
  .guida-indice-voci { list-style: none; }
  .guida-indice-voci a { display: block; color: var(--spento); text-decoration: none; padding: 6px 0; line-height: 1.35; font-size: 14px; }
  .guida-indice-voci a:hover { color: var(--testo); }
  .guida-testo { line-height: 1.7; }
  .guida-testo h2 { font-size: var(--t-titolo); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; margin: var(--sp-6) 0 var(--sp-2); scroll-margin-top: calc(var(--testata) + var(--sp-3)); }
  .guida-testo h2:first-child { margin-top: 0; }
  .guida-testo p, .guida-testo ul, .guida-testo ol { margin-bottom: var(--sp-2); }
  .guida-testo ul, .guida-testo ol { padding-left: 1.2em; }
  .guida-testo a { color: var(--testo); text-decoration: underline; text-underline-offset: 3px; }
  .guida-testo table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: var(--sp-3); }
  .guida-testo th, .guida-testo td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--filo); }
  .guida-testo th { font-size: var(--t-etichetta); letter-spacing: 0.07em; text-transform: uppercase; color: var(--spento); font-weight: 500; }
  .guida-invito { background: var(--testo); color: rgba(242, 239, 233, 0.75); border-radius: var(--r-card); padding: var(--sp-4); margin: var(--sp-4) 0; }
  .guida-invito b { display: block; color: var(--chiaro); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: var(--sp-1); }
  .guida-invito .btn { margin-top: var(--sp-3); text-decoration: none; }
  .guida-nota { background: var(--carta); border-radius: var(--r-card); padding: var(--sp-3); color: var(--spento); }
  .guida-pubblicata { color: var(--spento); font-size: 14px; border-top: 1px solid var(--filo); padding-top: var(--sp-2); margin-top: var(--sp-6); }
  .guida-pubblicata a { color: var(--testo); }
  .guida-autore { margin-top: var(--sp-3); }
  .guida-autore b { display: block; font-size: 17px; margin-bottom: var(--sp-1); }
  /* la foto come nel riquadro dell'autore delle guide di Humatic: tonda, 96 px, a sinistra del testo; sotto i 620 sale sopra */
  .autore-riga { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
  .autore-foto { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; filter: saturate(0.6); }
  @media (max-width: 620px) { .autore-riga { grid-template-columns: 1fr; } }
  .guida-percorso { list-style: none; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
  .guida-percorso a { display: block; height: 100%; background: var(--carta); border-radius: 8px; padding: 10px; color: var(--spento); text-decoration: none; font-size: 13px; line-height: 1.3; }
  .guida-percorso a span { display: block; font-size: var(--t-etichetta); letter-spacing: 0.07em; margin-bottom: 4px; }
  .guida-percorso a.qui { background: var(--testo); color: var(--chiaro); }
  .guida-percorso a.qui span { color: var(--accento); }
  .guida-passi { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
  #p-guida > .colonna { padding-bottom: var(--sp-6); }
  /* «Ti potrebbe interessare anche»: al passaggio la foto si avvicina appena e il titolo si sottolinea */
  /* .hub-gruppi a da' alle righe dei riquadri un filo e un margine: qui la card e' un a dentro lo stesso contenitore, e non li vuole */
  .hub-gruppi a.guida-vicina { display: block; padding: 0; margin: 0; border-top: 0; overflow: hidden; color: inherit; text-decoration: none; }
  .guida-vicina-foto { display: block; overflow: hidden; }
  /* la foto della scheda e' sempre 16:9: un'immagine fuori misura non allunga la sua scheda ne' la riga */
  .guida-vicina-foto img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: 50% 30%; transition: transform .35s ease; }
  /* il titolo tiene sempre lo spazio di due righe: le schede sono alte uguali anche quando un titolo sta in una riga */
  .guida-vicina-titolo { display: block; padding: var(--sp-2) var(--sp-3) var(--sp-3); line-height: 1.4; min-height: calc(2 * 1.4em + var(--sp-2) + var(--sp-3)); text-underline-offset: 3px; }
  .guida-vicina:hover .guida-vicina-foto img { transform: scale(1.05); }
  .guida-vicina:hover .guida-vicina-titolo { text-decoration: underline; }
  @media (prefers-reduced-motion: reduce) { .guida-vicina-foto img { transition: none; } }
  @media (max-width: 900px) {
    .guida-testata { aspect-ratio: auto; min-height: 420px; padding: var(--sp-4) var(--sp-3); background-image: linear-gradient(90deg, rgba(231, 228, 222, 0.95) 0%, rgba(231, 228, 222, 0.7) 70%), var(--copertina) !important; }
    .guida-testata .testo { max-width: 100%; }
    .guida-impaginato { grid-template-columns: minmax(0, 1fr); }
    .guida-banner { position: static; }
    .guida-percorso { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) { .percorso.hub, .hub-gruppi { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .percorso.hub, .hub-gruppi { grid-template-columns: 1fr; } }


  /* 3. il confronto: le carte del Metodo, con la loro stessa grammatica */
  .carta-confronto .loghi .marchio { --mark: 24px; color: var(--chiaro); }
  .carta-confronto .loghi .persone { width: 28px; height: 28px; display: block; }


  /* 4. cosa ottieni e quanto costa: un blocco solo, scuro */
  .ottieni { background: var(--testo); color: var(--chiaro); border-radius: var(--r-card); padding: var(--sp-6) var(--sp-4); }
  .ottieni h2 { color: var(--chiaro); }
  .ottieni .logo-ottieni { --mark: 32px; color: var(--chiaro); margin-bottom: var(--sp-4); }
  .parti { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
  .parti li { border-top: 1px solid var(--scuro-2); padding-top: var(--sp-2); color: rgba(242, 239, 233, 0.75); line-height: 1.5; }
  .parti .num { display: block; font-size: var(--t-etichetta); letter-spacing: 0.07em; color: var(--accento); margin-bottom: var(--sp-1); }
  .parti b { display: block; color: var(--chiaro); font-weight: 800; letter-spacing: -0.02em; font-size: 17px; line-height: 1.25; margin-bottom: var(--sp-1); }
  .costa { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--scuro-2); }
  .costa h3 { font-size: var(--t-titolo); font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--sp-3); }
  .listino { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); }
  .listino > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--sp-2); }
  .listino .etichetta { flex-basis: 100%; font-size: var(--t-etichetta); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; color: rgba(242, 239, 233, 0.7); }
  .listino .cifra { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--accento); }
  .listino s, .listino .a-persona { color: rgba(242, 239, 233, 0.7); }
  .nota-costo b { color: var(--chiaro); font-weight: 800; }
  .nota-costo { font-size: 14px; color: rgba(242, 239, 233, 0.7); align-self: end; }
  @media (max-width: 600px) { .ottieni { padding: var(--sp-4) var(--sp-3); } }

  /* sul telefono un margine solo, 16px, come in Humatic e come la pillola della testata: titoli, colonne, riquadri e
     piede partono dalla stessa linea (nel mockup il titolo stava a 32 e la colonna a 16) */
  @media (max-width: 600px) {
    .colonna, .impaginato { padding-left: var(--sp-2); padding-right: var(--sp-2); }
    .titolo-pagina, .piede-sito, .apertura { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  }

  /* ===== l'offerta di Humatic dentro il prodotto (da docs/offerta-humatic.html): la finestra dopo la presa,
     la scheda presa e la conferma. La richiesta e' della singola scheda: nell'area non c'e'. Un solo stato per i comandi: si cambia in un punto e cambia in tutti ===== */
  .finestra.larga { max-width: 600px; max-height: calc(100vh - 2 * var(--sp-2)); overflow: auto; }
  .finestra h3 { font-size: var(--t-titolo); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; margin: 4px 0 var(--sp-2); }
  .offerta-marchio { --mark: 20px; margin-bottom: var(--sp-2); }
  .dubbi { list-style: none; margin: var(--sp-1) 0 var(--sp-2); }
  .dubbi li { padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); position: relative; }
  .dubbi li::before { content: "?"; position: absolute; left: 0; top: var(--sp-1); font-weight: 800; color: var(--accento); }
  .comandi { display: grid; gap: var(--sp-3); margin: var(--sp-3) 0; }
  .comando .riga-c { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-1); }
  .comando .riga-c .etichetta-sezione { margin-bottom: 0; }
  .comando .valore { font-weight: 800; }
  .comando input[type=range] { width: 100%; accent-color: var(--testo); }
  .tacche { display: flex; justify-content: space-between; font-size: var(--t-etichetta); color: var(--spento); }
  .tacche span { position: relative; text-align: center; min-width: 1ch; }
  .tacche .consigliato { font-weight: 800; color: var(--testo); }
  .tacche .consigliato em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; font-style: normal; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; background: var(--accento-tocco); color: var(--su-accento); border-radius: var(--r-pillola); padding: 2px 8px; }
  .comando:has(.consigliato) { padding-bottom: 22px; }
  .pillole { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  .pillola { font-family: var(--font); font-size: 14px; border: 1px solid var(--filo); background: transparent; color: var(--spento); border-radius: var(--r-pillola); padding: 6px var(--sp-2); cursor: pointer; }
  .pillola:hover { border-color: var(--testo); color: var(--testo); }
  .pillola.accesa { background: var(--testo); border-color: var(--testo); color: var(--chiaro); }
  .prezzo { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
  .prezzo .cifra { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
  .prezzo s { color: var(--spento); }
  .prezzo-nota, .rassicura { font-size: 14px; color: var(--spento); margin-top: 4px; line-height: 1.5; }
  .rassicura { margin-top: var(--sp-2); }
  .btn-muto { border-color: transparent; color: var(--spento); }
  .btn-muto:hover { background: transparent; color: var(--testo); }
  .chiedilo { background: var(--fondo); border-radius: var(--r-card); padding: var(--sp-4); margin-top: var(--sp-3); }
  .chiedilo h4 { font-size: var(--t-titolo); font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--sp-1); }
  .riepilogo { list-style: none; border-top: 1px solid var(--filo); margin: var(--sp-3) 0 0; }
  .riepilogo li { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 12px 0; border-bottom: 1px solid var(--filo); }
  .riepilogo li span:first-child { color: var(--spento); }
  .riepilogo li > span:last-child { font-weight: 500; text-align: right; }
  @media (max-width: 600px) { .chiedilo { padding: var(--sp-3); } .finestra.larga { padding: var(--sp-3); } }

  /* sul server ogni indirizzo e' una pagina sola: la sua sezione si vede sempre */
  /* sul server ogni indirizzo e' una pagina vera: niente dissolvenza all'arrivo. Nel mockup, sito a pagina unica,
     accompagnava il cambio di schermata; qui scatterebbe a ogni caricamento come un lampo greige */
  .pagina, .pagina.attiva { display: block; animation: none; }

  /* sotto i 1100 pixel, dove le voci non ci stanno piu', la testata e' il menu (Humatic): nella pillola restano il marchio e il tondo; voci e pulsante vivono
     nel menu a tutto schermo */
  @media (max-width: 1100px) {
    #testata { padding: var(--sp-1) var(--sp-2); }
    .testata { padding: 0 var(--sp-1) 0 18px; height: 60px; }
    .testata .marchio { --mark: 28px; }
    .testata .destra #btn-area { display: none; }
    .hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; border: none; border-radius: 50%; background: var(--testo); cursor: pointer; }
    .hamburger span { display: block; width: 18px; height: 2px; background: var(--chiaro); }
  }

  /* la barra dei consensi come quella di Humatic (styles/vetrina.css, .banner-consenso): fissa in fondo, su tutta la
     larghezza, il testo a sinistra e i due comandi a destra; il rifiuto e' una riga di testo; col pannello aperto cresce
     fino all'85% dello schermo, mai di piu', perche' il sito deve restare visibile sotto */
  .barra-consenso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--fondo); border-top: 1px solid var(--filo); padding: var(--sp-3) 0; padding-bottom: max(env(safe-area-inset-bottom), var(--sp-3)); max-height: 85svh; overflow-y: auto; }
  .barra-consenso[hidden] { display: none; }
  .barra-consenso__dentro, .barra-consenso__pannello { max-width: 1360px; margin: 0 auto; padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .barra-consenso__dentro { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
  .barra-consenso__parole { flex: 1 1 42em; min-width: 0; }
  .barra-consenso__domanda { margin: 0 0 var(--sp-1); font-weight: 600; }
  .barra-consenso__spiega { margin: 0; font-size: 13px; line-height: 1.6; color: var(--spento); }
  .barra-consenso a, .barra-consenso__rifiuto button { color: var(--testo); text-decoration: none; padding-bottom: 2px; background-image: linear-gradient(var(--accento), var(--accento)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size .2s ease-out; }
  .barra-consenso a:hover, .barra-consenso a:focus-visible, .barra-consenso__rifiuto button:hover, .barra-consenso__rifiuto button:focus-visible { background-size: 100% 2px; }
  .barra-consenso__rifiuto { margin: var(--sp-2) 0 0; }
  .barra-consenso__rifiuto button { appearance: none; background-color: transparent; border: 0; padding: 0 0 2px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .barra-consenso__scelte { display: flex; flex-direction: column; gap: var(--sp-1); flex-shrink: 0; min-width: 15em; }
  .barra-consenso__scelte .btn { width: 100%; }
  .barra-consenso__pannello { margin-top: var(--sp-3); }
  .barra-consenso__pannello > * { border-top: 1px solid var(--filo); }
  .barra-consenso__file { list-style: none; padding: 0; margin: 0; padding-top: var(--sp-2); }
  .barra-consenso__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; }
  .barra-consenso__fila + .barra-consenso__fila { border-top: 1px solid var(--filo); }
  .barra-consenso__voce { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
  .barra-consenso__voce span { color: var(--spento); }
  .barra-consenso__sempre { background: var(--carta); border-radius: var(--r-pillola); padding: 0 var(--sp-1); font-size: 12px; font-weight: 600; white-space: nowrap; }
  .barra-consenso__chiusa { display: flex; justify-content: flex-end; padding-top: var(--sp-3); border-top: 0 !important; }
  /* la levetta: un binario con il pomello, accesa piena */
  input.interruttore { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 26px; border: 1px solid var(--spento); border-radius: var(--r-pillola); background: var(--carta); position: relative; cursor: pointer; margin: 0; }
  input.interruttore::before { content: ""; position: absolute; top: 50%; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--spento); transform: translateY(-50%); transition: transform .15s ease, background-color .15s ease; }
  input.interruttore:checked { background: var(--testo); border-color: var(--testo); }
  input.interruttore:checked::before { background: var(--chiaro); transform: translateY(-50%) translateX(18px); }
  input.interruttore:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { input.interruttore::before { transition: none; } }
  @media (max-width: 620px) {
    .barra-consenso { padding: var(--sp-2) 0; }
    .barra-consenso__dentro, .barra-consenso__pannello { padding-left: var(--sp-2); padding-right: var(--sp-2); }
    .barra-consenso__dentro { gap: var(--sp-2); }
    .barra-consenso__scelte { width: 100%; min-width: 0; }
  }