:root {
    --ch-primario: #0d827c;
    --ch-secondario: #12a19a;
    --ch-accento: #0d827c;
    --ch-sfondo: #ffffff;
    --ch-testo: #6f727a;
    --ch-font-titoli: 'Architects Daughter', 'Comic Sans MS', cursive;
    --ch-font-testo: 'Inter', system-ui, sans-serif;
    --ch-font-interfaccia: 'Poppins', system-ui, sans-serif;
    --ch-dim-base: 16px;
  }
  * { box-sizing: border-box; }
  body { margin:0; font-family: var(--ch-font-testo); font-size: var(--ch-dim-base); background: var(--ch-sfondo); color: var(--ch-testo); line-height:1.65; }
  h1, h2, h3, h4 { font-family: var(--ch-font-titoli); line-height:1.25; }
  a { color: var(--ch-primario); }
  img { max-width:100%; height:auto; display:block; }
  header.ch-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 5vw; position:relative; }
  header.ch-header .ch-brand { font-family: var(--ch-font-interfaccia); font-weight:700; font-size:1.25em; color:var(--ch-testo); text-decoration:none; }
  header.ch-header .ch-brand img { max-height:52px; width:auto; }
  #ch-menu-toggle { display:none; }
  /* ── CAMBIO LINGUA, dentro il menu ──────────────────────────────────── */
  /* STA FUORI DAL MENU, di proposito.
     Con la testata a panino il menu e' chiuso finche' non lo si apre: un
     cambio lingua nascosto li' dentro non lo trova chi ne ha bisogno —
     proprio chi sta leggendo in una lingua che non capisce. Resta quindi
     accanto al pulsante, sempre in vista, a qualunque misura di schermo. */
  header.ch-header .ch-lingue { display:flex; gap:10px; align-items:center; list-style:none;
    margin:0 14px 0 auto; padding:0; }
  header.ch-header .ch-lingue li { margin:0; }
  header.ch-header .ch-lingue a,
  header.ch-header .ch-lingue span { font-family:var(--ch-font-interfaccia); font-size:.86em; text-decoration:none; }
  header.ch-header .ch-lingue a { color:var(--ch-primario); }
  header.ch-header .ch-lingue a:hover { text-decoration:underline; }
  /* La lingua in cui si sta leggendo si vede ma non si clicca: cliccarla non
     farebbe niente, e un collegamento che non fa niente e' un difetto. */
  header.ch-header .ch-lingue .ch-lingua-attuale span { color:var(--ch-testo); opacity:.55; cursor:default; }
  /* Sullo stretto resta solo la lingua in cui si PUO' passare: ripetere anche
     quella corrente ruba la riga al nome del sito senza aggiungere nulla. */
  @media (max-width: 560px) {
    header.ch-header .ch-lingue .ch-lingua-attuale { display:none; }
    header.ch-header .ch-lingue { margin-right:10px; }
  }

  /* ── VISIBILITA' PER TIPO DI SCHERMO ─────────────────────────────────
     Serve a impaginare per davvero: su un telefono una fila di quattro
     riquadri non funziona e la si sostituisce con un elenco; su un monitor
     un elenco lungo spreca meta' schermo. Si scrivono tutti e due i blocchi
     e si accende ciascuno dove ha senso.

     Il blocco nascosto e' COMUNQUE nella pagina: viene mandato al browser e
     poi nascosto. Non e' un modo per non mandare qualcosa a qualcuno — per
     quello bisognerebbe indovinare il dispositivo sul server, cosa che
     sbaglia spesso e manda a gambe all'aria la cache delle pagine. Il costo
     pero' e' basso: immagini e riquadri hanno `loading="lazy"`, e cio' che
     sta dentro un antenato `display:none` non entra mai nello schermo,
     quindi non viene nemmeno scaricato. Viaggia il testo, non le fotografie.

     780px e' la stessa soglia del video di sfondo e degli adattamenti delle
     slide: un limite solo, ricordabile. */
  @media (max-width: 780px) { .ch-solo-desktop { display:none !important; } }
  @media (min-width: 781px) { .ch-solo-mobile  { display:none !important; } }

  /* ── COMPARSA ALLO SCORRIMENTO ───────────────────────────────────────
     Il blocco parte nascosto e si mostra quando arriva sotto gli occhi.

     PERCHE' LA CLASSE DI PARTENZA LA METTE LO SCRIPT e non il PHP: se il
     nascondimento arrivasse dall'HTML, chi ha il JavaScript spento — o chi
     lo ha bloccato, o chi legge attraverso un lettore che non lo esegue —
     si troverebbe una pagina VUOTA per sempre. Cosi' invece il caso
     peggiore e' che tutto si veda subito, che e' esattamente come si
     comportava prima. */
  .ch-comparsa[data-ch-pronta] { opacity:0; will-change:opacity, transform;
    transition:opacity .75s cubic-bezier(.16,.62,.31,1), transform .75s cubic-bezier(.16,.62,.31,1);
    transition-delay:var(--ch-comparsa-attesa, 0ms); }
  .ch-comparsa-salita[data-ch-pronta]        { transform:translateY(34px); }
  .ch-comparsa-da-sinistra[data-ch-pronta]   { transform:translateX(-40px); }
  .ch-comparsa-da-destra[data-ch-pronta]     { transform:translateX(40px); }
  .ch-comparsa-ingrandimento[data-ch-pronta] { transform:scale(.94); }
  .ch-comparsa[data-ch-pronta].ch-vista { opacity:1; transform:none; }
  /* Sullo stretto gli spostamenti si accorciano, come per le slide: 40px su
     uno schermo di telefono sono un salto, non un ingresso. */
  @media (max-width: 780px) {
    .ch-comparsa-salita[data-ch-pronta]      { transform:translateY(18px); }
    .ch-comparsa-da-sinistra[data-ch-pronta] { transform:translateX(-20px); }
    .ch-comparsa-da-destra[data-ch-pronta]   { transform:translateX(20px); }
  }
  /* Chi ha chiesto meno movimento vede il contenuto e basta: nessuna
     comparsa, nessuna attesa. */
  @media (prefers-reduced-motion: reduce) {
    .ch-comparsa[data-ch-pronta] { opacity:1; transform:none; transition:none; }
  }

  /* ── ANIMAZIONE HTML5 ────────────────────────────────────────────────
     Il riquadro tiene il RAPPORTO della tela originale invece di un'altezza
     fissa: un'animazione disegnata su 1200x675 stiracchiata su un telefono
     si rovina, mentre rimpicciolita nel suo rapporto resta quella che era. */
  .ch-html5 { margin:30px 0; }
  .ch-html5-titolo { margin:0 0 12px; }
  .ch-html5-tela { position:relative; width:100%; padding-top:var(--ch-html5-rapporto, 56.25%);
    border-radius:10px; overflow:hidden; background:rgba(0,0,0,.03); }
  .ch-html5-tela iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

  /* ── MAPPA ───────────────────────────────────────────────────────────
     Fino al clic non c'e' nessuna mappa: c'e' un'anteprima disegnata qui,
     con i colori del tema. Nessuna richiesta a nessuno, nessun server che
     veda passare chi legge senza che lo abbia chiesto. */
  .ch-mappa { position:relative; border-radius:12px; overflow:hidden; margin:30px 0;
    border:1px solid rgba(0,0,0,.10); }
  .ch-mappa-bassa  { height:260px; }
  .ch-mappa-media  { height:400px; }
  .ch-mappa-alta   { height:560px; }
  .ch-mappa-anteprima { position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px;
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,.045) 0 1px, transparent 1px 46px),
      repeating-linear-gradient(90deg, rgba(0,0,0,.045) 0 1px, transparent 1px 46px),
      color-mix(in srgb, var(--ch-primario) 6%, var(--ch-sfondo)); }
  @supports not (background: color-mix(in srgb, red 6%, white)) {
    .ch-mappa-anteprima { background-color:rgba(0,0,0,.03); }
  }
  .ch-mappa-perno { color:var(--ch-primario); }
  .ch-mappa-indirizzo { margin:0; font-family:var(--ch-font-interfaccia); font-size:1.02em; }
  .ch-mappa-nota { margin:0; font-size:.8em; opacity:.6; max-width:44ch; }
  .ch-mappa-tela { position:absolute; inset:0; }
  /* Leaflet colora di suo i comandi: si riportano al tema per non avere un
     riquadro azzurro in mezzo a una pagina che azzurra non e'. */
  .ch-mappa .leaflet-control-zoom a { color:var(--ch-testo); }
  .ch-mappa .leaflet-container { font-family:inherit; }

  /* ── LISTINO / PIANI A CONFRONTO ─────────────────────────────────────
     PRESENTA, non incassa: il pulsante porta al negozio. */
  .ch-listino { display:grid; gap:18px; margin:34px 0;
    grid-template-columns:repeat(var(--ch-listino-n, 3), minmax(0, 1fr)); align-items:start; }
  @media (max-width: 980px) { .ch-listino { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  @media (max-width: 620px) { .ch-listino { grid-template-columns:1fr; } }
  .ch-piano { position:relative; border:1px solid rgba(0,0,0,.10); border-radius:12px;
    padding:26px 22px; background:var(--ch-sfondo); text-align:center; }
  /* Il piano in evidenza si alza e prende il colore del tema. NON si
     ingrandisce con `scale`: ingrandendolo il testo diventa sfocato su
     alcuni schermi, e un prezzo sfocato e' l'ultima cosa che serve. */
  .ch-piano-evidenza { border-color:var(--ch-primario); border-width:2px;
    box-shadow:0 14px 34px rgba(0,0,0,.10); margin-top:-10px; padding-top:34px; }
  .ch-piano-nota { position:absolute; top:-11px; left:50%; transform:translateX(-50%);
    background:var(--ch-primario); color:#fff; font-size:.72em; letter-spacing:.08em;
    text-transform:uppercase; padding:5px 14px; border-radius:99px;
    font-family:var(--ch-font-interfaccia); white-space:nowrap; }
  .ch-piano h3 { margin:0 0 4px; font-size:1.12em; }
  .ch-piano-sotto { margin:0 0 16px; font-size:.9em; opacity:.62; }
  .ch-piano-prezzo { display:flex; align-items:baseline; justify-content:center; gap:3px;
    margin-bottom:18px; font-family:var(--ch-font-interfaccia); color:var(--ch-primario); }
  .ch-piano-prezzo i { font-style:normal; font-size:1.1em; align-self:flex-start; margin-top:.35em; }
  .ch-piano-prezzo b { font-size:2.6em; line-height:1; font-weight:700; }
  .ch-piano-prezzo small { font-size:.8em; opacity:.6; color:var(--ch-testo); }
  .ch-piano-righe { list-style:none; margin:0 0 20px; padding:0; text-align:left; }
  .ch-piano-righe li { display:flex; gap:9px; align-items:flex-start; padding:7px 0;
    border-bottom:1px solid rgba(0,0,0,.05); font-size:.93em; }
  .ch-piano-righe li:last-child { border-bottom:0; }
  .ch-riga-inclusa span { color:var(--ch-primario); }
  .ch-riga-esclusa { opacity:.45; text-decoration:line-through; }
  .ch-piano-cta { margin:0; }
  .ch-piano-cta .ch-btn { display:block; }

  /* ── RIQUADRI GIREVOLI ───────────────────────────────────────────────
     L'involucro e' un <button>: si raggiunge col tabulatore e si attiva con
     Invio senza scrivere una riga. Si gira al passaggio del mouse E quando
     riceve il focus E al tocco (quello lo fa lo script): su telefono il
     passaggio del mouse non esiste, e senza le altre due strade meta' dei
     visitatori vedrebbe solo la faccia davanti. */
  .ch-girevoli { display:grid; gap:18px; margin:34px 0;
    grid-template-columns:repeat(var(--ch-gir-n, 3), minmax(0, 1fr)); }
  @media (max-width: 900px) { .ch-girevoli { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  @media (max-width: 560px) { .ch-girevoli { grid-template-columns:1fr; } }
  .ch-girevole { border:0; background:none; padding:0; cursor:pointer;
    perspective:1200px; min-height:260px; font:inherit; color:inherit; text-align:inherit; }
  .ch-gir-piano { position:relative; display:block; width:100%; height:100%; min-height:260px;
    transition:transform .7s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; }
  .ch-girevole:hover .ch-gir-piano,
  .ch-girevole:focus-visible .ch-gir-piano,
  .ch-girevole[aria-pressed="true"] .ch-gir-piano { transform:rotateY(180deg); }
  .ch-girevoli-verticale .ch-girevole:hover .ch-gir-piano,
  .ch-girevoli-verticale .ch-girevole:focus-visible .ch-gir-piano,
  .ch-girevoli-verticale .ch-girevole[aria-pressed="true"] .ch-gir-piano { transform:rotateX(180deg); }
  .ch-gir-faccia { position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:9px; padding:26px 20px; border-radius:12px;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    background-size:cover; background-position:center; text-align:center; }
  .ch-gir-fronte { border:1px solid rgba(0,0,0,.10); background-color:rgba(0,0,0,.02); }
  /* Con una fotografia dietro serve una velatura, altrimenti il titolo
     scompare su ogni immagine chiara. */
  .ch-gir-fronte[style*="background-image"] { color:#fff; }
  .ch-gir-fronte[style*="background-image"]::before {
    content:''; position:absolute; inset:0; border-radius:12px; background:rgba(0,0,0,.42); }
  .ch-gir-fronte[style*="background-image"] > * { position:relative; z-index:1; }
  .ch-gir-retro { background:var(--ch-primario); color:#fff;
    transform:rotateY(180deg); }
  .ch-girevoli-verticale .ch-gir-retro { transform:rotateX(180deg); }
  .ch-gir-icona { color:var(--ch-primario); }
  .ch-gir-fronte[style*="background-image"] .ch-gir-icona { color:#fff; }
  .ch-gir-titolo { font-family:var(--ch-font-interfaccia); font-weight:700; font-size:1.08em; }
  .ch-gir-testo { font-size:.92em; opacity:.85; }
  .ch-gir-richiamo { margin-top:6px; border:1px solid rgba(255,255,255,.6);
    border-radius:99px; padding:7px 16px; font-size:.85em; font-family:var(--ch-font-interfaccia); }
  /* Chi ha chiesto meno movimento riceve il retro senza rotazione. */
  @media (prefers-reduced-motion: reduce) {
    .ch-gir-piano { transition:none; }
  }

  /* ── ANELLI PERCENTUALE ──────────────────────────────────────────────── */
  .ch-anelli { display:grid; gap:20px; margin:34px 0;
    grid-template-columns:repeat(var(--ch-anelli-n, 4), minmax(0, 1fr)); }
  @media (max-width: 860px) { .ch-anelli { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  @media (max-width: 420px) { .ch-anelli { grid-template-columns:1fr; } }
  .ch-anello { position:relative; margin:0; text-align:center; }
  .ch-anello svg { width:100%; max-width:150px; height:auto; display:block; margin:0 auto;
    transform:rotate(-90deg); }
  .ch-anello circle { fill:none; stroke-width:8; }
  .ch-anello-sfondo { stroke:rgba(0,0,0,.09); }
  .ch-anello-pieno { stroke:var(--ch-primario); stroke-linecap:round;
    transition:stroke-dasharray 1200ms cubic-bezier(.16,.62,.31,1); }
  .ch-anello-centro { position:absolute; left:0; right:0; top:0; height:150px;
    display:flex; align-items:center; justify-content:center; pointer-events:none;
    font-family:var(--ch-font-interfaccia); font-weight:700; font-size:1.5em; color:var(--ch-primario); }
  .ch-anello figcaption { margin-top:8px; font-size:.92em; opacity:.72; }

  /* ── CAROSELLO DI SCHEDE ─────────────────────────────────────────────
     Scorrimento con lo scatto, nessuna libreria: col dito funziona come ci
     si aspetta e con la rotella pure. */
  .ch-carosello { margin:34px 0; }
  .ch-carosello-pista { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:12px; scrollbar-width:thin; }
  .ch-car-scheda { flex:0 0 calc((100% - (var(--ch-car-n) - 1) * 16px) / var(--ch-car-n));
    scroll-snap-align:start; text-decoration:none; color:inherit; display:block; }
  @media (max-width: 900px) { .ch-car-scheda { flex-basis:calc(50% - 8px); } }
  @media (max-width: 560px) { .ch-car-scheda { flex-basis:82%; } }
  .ch-car-scheda img { width:100%; height:auto; display:block; border-radius:10px; }
  .ch-carosello-scheda .ch-car-scheda { border:1px solid rgba(0,0,0,.09); border-radius:12px;
    overflow:hidden; background:var(--ch-sfondo); }
  .ch-carosello-scheda .ch-car-scheda img { border-radius:0; }
  .ch-carosello-tonda .ch-car-scheda img { border-radius:50%; aspect-ratio:1; object-fit:cover; }
  .ch-carosello-nuda .ch-car-scheda img { border-radius:0; }
  .ch-car-testo { padding:14px 16px; display:block; }
  .ch-carosello-nuda .ch-car-testo, .ch-carosello-tonda .ch-car-testo { padding:12px 4px; text-align:center; }
  .ch-car-testo strong { display:block; font-family:var(--ch-font-interfaccia); font-size:.98em; }
  .ch-car-testo span { display:block; font-size:.88em; opacity:.68; margin-top:4px; }
  a.ch-car-scheda:hover strong { color:var(--ch-primario); }

  /* ── ICONA SINGOLA ───────────────────────────────────────────────────── */
  .ch-icona-sola { margin:24px 0; }
  .ch-icona-sinistra { text-align:left; } .ch-icona-centro { text-align:center; } .ch-icona-destra { text-align:right; }
  .ch-icona-sola a { text-decoration:none; color:inherit; }
  .ch-icona-sola-segno { display:inline-flex; align-items:center; justify-content:center; }
  .ch-icona-cornice-tonda, .ch-icona-cornice-quadrata {
    border:2px solid currentColor; padding:18px; }
  .ch-icona-cornice-tonda { border-radius:50%; }
  .ch-icona-cornice-quadrata { border-radius:14px; }
  .ch-icona-tinta-primario .ch-icona-sola-segno { color:var(--ch-primario); }
  .ch-icona-tinta-secondario .ch-icona-sola-segno { color:var(--ch-secondario); }
  .ch-icona-tinta-accento .ch-icona-sola-segno { color:var(--ch-accento); }
  .ch-icona-tinta-testo .ch-icona-sola-segno { color:var(--ch-testo); }
  .ch-icona-sola-eti { display:block; margin-top:10px; font-family:var(--ch-font-interfaccia);
    font-size:.94em; }

  /* ── GALLERIA ────────────────────────────────────────────────────────
     E' una GRIGLIA, e le mattonelle hanno tutte la stessa proporzione. Con
     l'altezza libera, fotografie verticali e orizzontali insieme producono
     una scacchiera sfrangiata: si vede che sono immagini, non si vede che
     sono una raccolta. Il ritaglio qui e' giusto (al contrario che nelle
     slide): una miniatura serve a far riconoscere, non a far vedere. */
  /* DUE IMPIANTI, e la scelta non e' estetica.
     
     A COLONNE (predefinito, "libera"). Le fotografie tengono la loro forma e
     si incastrano come i mattoni di un muro. E' l'unico impianto onesto
     quando le immagini sono di orientamento diverso: la griglia rigida, per
     far quadrare i conti, RITAGLIA — e su una miniatura quadrata un ritratto
     verticale perde la testa o i piedi. Meglio una fila un po' irregolare
     che tre fotografie mutilate.
     
     A GRIGLIA (quadrata, 4:3, 3:4). Ha senso quando le immagini sono gia'
     tutte della stessa forma — schede prodotto, ritratti scattati uguali,
     loghi — e allora l'ordine perfetto e' un pregio e il ritaglio non toglie
     niente a nessuno. */
  .ch-galleria { margin:26px 0; }

  /* — a colonne — */
  .ch-gal-prop-libera { column-count:var(--ch-gal-n, 3); column-gap:12px; }
  .ch-gal-prop-libera .ch-gal-voce { break-inside:avoid; margin:0 0 12px; display:block; }
  .ch-gal-prop-libera .ch-gal-voce img { width:100%; height:auto; }
  @media (max-width: 900px) { .ch-gal-prop-libera { column-count:2; } }
  /* Sul telefono DUE colonne, non una: a una colonna ogni fotografia diventa
     larga quanto lo schermo e tre immagini fanno mille pixel di
     scorrimento — una raccolta che si guarda una foto per volta non e' piu'
     una raccolta, e' un elenco. */
  @media (max-width: 480px) { .ch-gal-prop-libera { column-count:2; column-gap:8px; }
    .ch-gal-prop-libera .ch-gal-voce { margin-bottom:8px; } }

  /* — a griglia — */
  .ch-galleria:not(.ch-gal-prop-libera) { display:grid; gap:12px;
    grid-template-columns:repeat(var(--ch-gal-n, 3), minmax(0, 1fr)); }
  @media (max-width: 900px) { .ch-galleria:not(.ch-gal-prop-libera) { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  @media (max-width: 480px) { .ch-galleria:not(.ch-gal-prop-libera) { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; } }
  .ch-gal-prop-quadrata    .ch-gal-voce img { aspect-ratio:1; object-fit:cover; }
  .ch-gal-prop-orizzontale .ch-gal-voce img { aspect-ratio:4/3; object-fit:cover; }
  .ch-gal-prop-verticale   .ch-gal-voce img { aspect-ratio:3/4; object-fit:cover; }

  /* ── Effetti al passaggio ────────────────────────────────────────────
     Quattro forme, non diciotto: chi ne ha diciotto ne usa due e la pagina
     con sei effetti diversi sembra un campionario. */
  .ch-galleria .ch-gal-voce { position:relative; overflow:hidden; border-radius:10px; margin:0; }
  .ch-galleria .ch-gal-voce img { width:100%; height:auto; display:block;
    transition:transform .5s cubic-bezier(.2,.6,.3,1), filter .4s; }
  .ch-galleria .ch-gal-voce a { display:block; }
  .ch-galleria figcaption { font-size:.86em; opacity:.66; padding-top:8px; }
  /* velo — una velatura scende e la didascalia ci si appoggia sopra */
  .ch-gal-velo .ch-gal-voce figcaption { position:absolute; inset:auto 0 0 0; color:#fff;
    opacity:0; padding:14px; background:linear-gradient(transparent, rgba(0,0,0,.72));
    transition:opacity .35s; }
  .ch-gal-velo .ch-gal-voce:hover figcaption,
  .ch-gal-velo .ch-gal-voce:focus-within figcaption { opacity:1; }
  /* avvicinamento — la fotografia cresce dentro il suo riquadro */
  .ch-gal-avvicinamento .ch-gal-voce:hover img,
  .ch-gal-avvicinamento .ch-gal-voce:focus-within img { transform:scale(1.08); }
  /* salita — la didascalia sale da sotto */
  .ch-gal-salita .ch-gal-voce figcaption { position:absolute; left:0; right:0; bottom:0;
    color:#fff; padding:16px; background:rgba(0,0,0,.6);
    transform:translateY(100%); transition:transform .35s cubic-bezier(.2,.6,.3,1); }
  .ch-gal-salita .ch-gal-voce:hover figcaption,
  .ch-gal-salita .ch-gal-voce:focus-within figcaption { transform:none; }
  /* viraggio — parte in grigio e riprende colore */
  .ch-gal-viraggio .ch-gal-voce img { filter:grayscale(1); }
  .ch-gal-viraggio .ch-gal-voce:hover img,
  .ch-gal-viraggio .ch-gal-voce:focus-within img { filter:none; }
  @media (prefers-reduced-motion: reduce) {
    .ch-galleria .ch-gal-voce img { transition:none; }
    .ch-gal-salita .ch-gal-voce figcaption { transform:none; }
  }
  /* DOVE NON C'E' IL PASSAGGIO DEL MOUSE, LA DIDASCALIA ESCE DALL'IMMAGINE.
     Su un telefono l'hover non esiste, quindi una didascalia che compare
     solo al passaggio del mouse li' non compare MAI: e' informazione che
     sparisce per meta' dei visitatori.
     Ma tenerla ACCESA sopra la fotografia e' peggio del male: su una
     miniatura la fascia velata copre un settimo dell'immagine e smette di
     essere un effetto — diventa una striscia scura fissa. Qui la didascalia
     scende SOTTO la mattonella e torna a essere quello che e': una riga di
     testo. La fotografia resta intera, e si legge lo stesso. */
  @media (hover: none) {
    .ch-galleria .ch-gal-voce { overflow:visible; }
    .ch-galleria .ch-gal-voce img { border-radius:10px; }
    .ch-gal-velo .ch-gal-voce figcaption,
    .ch-gal-salita .ch-gal-voce figcaption {
      position:static; opacity:1; transform:none; background:none; color:inherit;
      padding:7px 2px 0; font-size:.82em; line-height:1.35; }
    /* Il viraggio in grigio, senza il passaggio del mouse che lo toglie,
       sarebbe una galleria in bianco e nero e basta: si spegne. */
    .ch-gal-viraggio .ch-gal-voce img { filter:none; }
  }

  /* ── ELENCO CON FILO (passi, tappe, servizi) ─────────────────────────
     La differenza con le colonne e' l'ORDINE: qui il secondo viene dopo il
     primo, e il filo lo dice. Il filo e' un pseudo-elemento della voce, non
     un bordo del contenitore: cosi' si ferma da solo sull'ultima. */
  ol.ch-filo { list-style:none; margin:30px 0; padding:0; }
  .ch-filo-voce { position:relative; display:flex; gap:20px; padding:0 0 30px; }
  .ch-filo-voce:last-child { padding-bottom:0; }
  .ch-filo-voce::before {
    content:''; position:absolute; left:26px; top:56px; bottom:-4px; width:2px;
    background:linear-gradient(to bottom, var(--ch-primario), rgba(0,0,0,.08)); opacity:.35; }
  .ch-filo-voce:last-child::before { display:none; }
  .ch-filo-segno { flex:0 0 54px; width:54px; height:54px; display:flex; align-items:center;
    justify-content:center; border:2px solid var(--ch-primario); color:var(--ch-primario);
    background:var(--ch-sfondo); position:relative; z-index:1; }
  .ch-filo-tonda .ch-filo-segno { border-radius:50%; }
  .ch-filo-quadrata .ch-filo-segno { border-radius:10px; }
  .ch-filo-segno b { font-family:var(--ch-font-interfaccia); font-size:1.15em; font-weight:700; }
  .ch-filo-corpo h3 { margin:10px 0 6px; font-size:1.12em; }
  .ch-filo-corpo p { margin:0; opacity:.85; }
  /* Variante a destra: il segno passa dall'altra parte e il testo si allinea
     di conseguenza. Su schermo stretto torna tutto a sinistra — a 400px
     l'allineamento a destra fa perdere il filo, letteralmente. */
  .ch-filo-destra .ch-filo-voce { flex-direction:row-reverse; text-align:right; }
  .ch-filo-destra .ch-filo-voce::before { left:auto; right:26px; }
  @media (max-width: 620px) {
    .ch-filo-destra .ch-filo-voce { flex-direction:row; text-align:left; }
    .ch-filo-destra .ch-filo-voce::before { left:26px; right:auto; }
  }

  /* ── FISARMONICA / DOMANDE FREQUENTI ─────────────────────────────────
     <details> nativi: nessuno script, tastiera compresa, e il browser li apre
     da solo quando si cerca una parola nella pagina. */
  .ch-fisarmonica { margin:30px 0; }
  .ch-fisarmonica-titolo { margin:0 0 16px; }
  .ch-piega { border:1px solid rgba(0,0,0,.10); border-radius:10px; margin-bottom:10px;
    background:rgba(0,0,0,.012); overflow:hidden; }
  .ch-piega > summary { cursor:pointer; padding:15px 46px 15px 18px; position:relative;
    font-family:var(--ch-font-interfaccia); font-weight:600; list-style:none; }
  .ch-piega > summary::-webkit-details-marker { display:none; }
  /* Il segno "+" diventa "×" ruotando: una sola forma, due significati, e la
     rotazione dice che e' la stessa cosa che si apre e si chiude. */
  .ch-piega > summary::after {
    content:'+'; position:absolute; right:16px; top:50%; transform:translateY(-50%);
    font-size:1.5em; line-height:1; color:var(--ch-primario); transition:transform .2s; }
  .ch-piega[open] > summary::after { content:'+'; transform:translateY(-50%) rotate(45deg); }
  .ch-piega > summary:hover { color:var(--ch-primario); }
  .ch-piega-corpo { padding:0 18px 16px; }
  .ch-piega-corpo > *:first-child { margin-top:0; }

  /* ── SCHEDE A LINGUETTE ──────────────────────────────────────────────── */
  .ch-schede { margin:30px 0; }
  .ch-schede-linguette { display:flex; flex-wrap:wrap; gap:4px; border-bottom:2px solid rgba(0,0,0,.08); }
  .ch-linguetta { border:0; background:none; cursor:pointer; padding:12px 18px;
    font-family:var(--ch-font-interfaccia); font-size:.95em; color:var(--ch-testo);
    border-bottom:2px solid transparent; margin-bottom:-2px; }
  .ch-linguetta:hover { color:var(--ch-primario); }
  .ch-linguetta.ch-attiva { color:var(--ch-primario); border-bottom-color:var(--ch-primario); font-weight:600; }
  .ch-scheda { padding:20px 2px; }
  .ch-scheda > *:first-child { margin-top:0; }
  /* SENZA JAVASCRIPT le schede non spariscono: si mostrano tutte, una sotto
     l'altra, con la loro linguetta come titolo. Meglio tutto il contenuto in
     fila che tre quarti di pagina invisibili. */
  .ch-schede:not([data-ch-pronte]) .ch-scheda[hidden] { display:block; }

  /* ── NUMERI IN EVIDENZA ──────────────────────────────────────────────── */
  .ch-numeri { display:grid; gap:18px; margin:34px 0;
    grid-template-columns:repeat(var(--ch-numeri-n, 4), minmax(0, 1fr)); }
  @media (max-width: 860px) { .ch-numeri { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  @media (max-width: 420px) { .ch-numeri { grid-template-columns:1fr; } }
  .ch-numero { text-align:center; padding:20px 12px; }
  .ch-numero-icona { display:block; color:var(--ch-primario); margin-bottom:8px; }
  .ch-numero-icona .ch-icona { margin:0 auto; }
  .ch-numero-valore { font-family:var(--ch-font-interfaccia); font-weight:700;
    font-size:clamp(2em, 4.4vw, 3.2em); line-height:1; color:var(--ch-primario);
    display:flex; align-items:baseline; justify-content:center; gap:2px; }
  .ch-numero-valore i { font-style:normal; font-size:.55em; }
  .ch-numero-etichetta { margin-top:8px; font-size:.92em; opacity:.72; }

  /* ── BARRE DI AVANZAMENTO ────────────────────────────────────────────── */
  .ch-avanzamento { margin:30px 0; }
  .ch-barra-riga { margin-bottom:16px; }
  .ch-barra-testa { display:flex; justify-content:space-between; align-items:baseline;
    font-family:var(--ch-font-interfaccia); font-size:.92em; margin-bottom:6px; }
  .ch-barra-testa b { color:var(--ch-primario); }
  .ch-barra { height:9px; border-radius:99px; background:rgba(0,0,0,.08); overflow:hidden; }
  .ch-barra-pieno { display:block; height:100%; border-radius:99px;
    background:linear-gradient(90deg, var(--ch-primario), var(--ch-accento, var(--ch-primario)));
    transition:width 1100ms cubic-bezier(.16,.62,.31,1); }

  /* ── CONFRONTO PRIMA / DOPO ──────────────────────────────────────────── */
  .ch-confronto { position:relative; margin:30px 0; overflow:hidden; border-radius:10px;
    line-height:0; touch-action:pan-y; }
  .ch-confronto > img { width:100%; height:auto; display:block; }
  /* IL TAGLIO SI FA CON `clip-path`, NON restringendo il riquadro.
     Restringendo il contenitore, l'immagine dentro si adatta alla nuova
     larghezza: invece di scoprirsi si RIMPICCIOLISCE, e se le due
     fotografie non hanno la stessa proporzione non combaciano piu'. Con
     `clip-path` l'immagine resta grande com'e' e si dipinge solo la parte
     a sinistra del cursore, che e' quello che l'occhio si aspetta. */
  .ch-confronto-dopo { position:absolute; inset:0; overflow:hidden;
    clip-path:inset(0 calc(100% - var(--ch-taglio)) 0 0); }
  .ch-confronto-dopo img { position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; max-width:none; display:block; }
  .ch-confronto-riga { position:absolute; top:0; bottom:0; left:var(--ch-taglio); width:2px;
    background:#fff; box-shadow:0 0 10px rgba(0,0,0,.4); pointer-events:none; }
  .ch-confronto-riga::after {
    content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:38px; height:38px; border-radius:50%; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.35); }
  .ch-confronto-eti { position:absolute; top:12px; z-index:2; line-height:1;
    background:rgba(0,0,0,.55); color:#fff; font-size:.78em; padding:6px 11px; border-radius:99px;
    font-family:var(--ch-font-interfaccia); pointer-events:none; }
  .ch-eti-prima { right:12px; } .ch-eti-dopo { left:12px; }
  /* Il cursore vero e proprio e' invisibile ma copre tutta l'immagine: si
     trascina da qualunque punto, e resta un <input> per la tastiera. */
  .ch-confronto input[type=range] {
    position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0;
    cursor:ew-resize; -webkit-appearance:none; appearance:none; background:none; }
    .ch-confronto input[type=range]:focus-visible { outline:3px solid var(--ch-primario); outline-offset:2px; opacity:.001; }

  /* ── GRIGLIA BENTO (mosaico di tessere) ──────────────────────────────── */
  .ch-bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px;
    gap:14px; grid-auto-flow:dense; margin:24px 0; }
  .ch-bento-cella { position:relative; display:flex; flex-direction:column; justify-content:flex-end;
    padding:18px; border-radius:14px; overflow:hidden; color:#fff; text-decoration:none;
    background:#243447 center/cover no-repeat; }
  .ch-bento-cella:not(.ch-bento-foto) {
    background:linear-gradient(135deg, var(--ch-primario,#2f4858), color-mix(in srgb, var(--ch-primario,#2f4858) 45%, #000)); }
  @supports not (background: color-mix(in srgb, red 45%, #000)) {
    .ch-bento-cella:not(.ch-bento-foto) { background:#2f4858; }
  }
  .ch-bento-larga  { grid-column:span 2; }
  .ch-bento-alta   { grid-row:span 2; }
  .ch-bento-grande { grid-column:span 2; grid-row:span 2; }
  .ch-bento-testo h3 { margin:0 0 4px; color:#fff; font-size:1.1rem; }
  .ch-bento-grande .ch-bento-testo h3 { font-size:1.5rem; }
  .ch-bento-testo p { margin:0; opacity:.92; font-size:.9rem; }
  a.ch-bento-cella { transition:transform .25s, box-shadow .25s; }
  a.ch-bento-cella:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.25); }
  /* Il mosaico si semplifica per gradi: due colonne sul tablet, una sola sul
     telefono, dove le misure diverse non hanno piu' senso e ogni tessera torna
     piena larghezza — un bento che non si arrende diventa illeggibile. */
  @media (max-width:900px) {
    .ch-bento { grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
    .ch-bento-grande { grid-column:span 2; }
  }
  @media (max-width:560px) {
    .ch-bento { grid-template-columns:1fr; grid-auto-rows:auto; }
    .ch-bento-cella { grid-column:auto !important; grid-row:auto !important; min-height:150px; }
  }

  /* ── CONTO ALLA ROVESCIA ─────────────────────────────────────────────── */
  .ch-conto { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin:24px 0; }
  .ch-conto-titolo { width:100%; text-align:center; font-weight:600; font-size:1.15rem; }
  .ch-conto-orologio { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
  .ch-conto-cella { min-width:74px; padding:12px 10px; border-radius:12px; text-align:center;
    background:color-mix(in srgb, var(--ch-primario,#2f4858) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--ch-primario,#2f4858) 30%, transparent); }
  @supports not (background: color-mix(in srgb, red 12%, transparent)) {
    .ch-conto-cella { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12); }
  }
  .ch-conto-num { display:block; font-size:2rem; font-weight:700; line-height:1;
    font-variant-numeric:tabular-nums; color:var(--ch-primario,#2f4858); }
  .ch-conto-eti { display:block; margin-top:4px; font-size:.72rem; letter-spacing:.04em;
    text-transform:uppercase; opacity:.7; }
  .ch-conto-nota { width:100%; text-align:center; margin:4px 0 0; opacity:.8; font-size:.9rem; }
  .ch-conto.ch-conto-finito .ch-conto-orologio { display:none; }
  .ch-conto-zero { width:100%; text-align:center; font-weight:600; font-size:1.2rem; color:var(--ch-primario,#2f4858); }

  /* ── SEZIONE / FASCIA (sfondo, titolo, colonne) ──────────────────────── */
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-sezione { position:relative; width:100vw; margin-left:calc(50% - 50vw);
    overflow:hidden; padding:56px 22px; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-sezione.ch-sezione-alta  { padding:88px 22px; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-sezione.ch-sezione-piena { min-height:100vh; display:flex; align-items:center; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-sezione.ch-sezione-parallasse { background-attachment:fixed; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-sezione.ch-sezione-chiaro,
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-sezione.ch-sezione-chiaro h2,
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-sezione.ch-sezione-chiaro h1,
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-sezione.ch-sezione-chiaro h3,
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-sezione.ch-sezione-chiaro p { color:#fff; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-sezione.ch-sezione-chiaro .ch-colonna-icona { color:#fff; }
  .ch-sezione-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .ch-sezione-velo  { position:absolute; inset:0; z-index:1; }
  .ch-sezione-dentro { position:relative; z-index:2; max-width:1240px; margin:0 auto; width:100%; }
  .ch-sezione-testa { margin:0 0 30px; }
  .ch-sezione-testa.ch-testa-centro   { text-align:center; }
  .ch-sezione-testa.ch-testa-sinistra { text-align:left; }
  .ch-sezione-testa h2, .ch-sezione-testa h1 { margin:0 0 8px; font-size:clamp(1.6em,3vw,2.4em); }
  .ch-sezione-testa p  { margin:0; opacity:.9; font-size:clamp(1em,1.6vw,1.2em); }
  .ch-sezione-colonne { display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:26px; align-items:start; }
  .ch-sezione-col img { width:100%; height:auto; border-radius:10px; margin:0 0 12px; display:block; }
  .ch-sezione-col h3  { margin:0 0 8px; }
  .ch-sezione-col p   { margin:0 0 14px; opacity:.92; }
  .ch-sezione-col .ch-btn { display:inline-block; }
  /* Immagine e testo AFFIANCATI (una riga per voce, lati alternati). */
  .ch-sezione-affiancate { display:flex; flex-direction:column; gap:44px; }
  .ch-sezione-riga { display:flex; gap:36px; align-items:center; }
  .ch-sezione-riga.ch-riga-destra { flex-direction:row-reverse; }
  .ch-riga-media, .ch-riga-testo { flex:1 1 0; min-width:0; }
  .ch-riga-media img { width:100%; height:auto; border-radius:12px; display:block; }
  .ch-riga-testo h3 { margin:0 0 10px; font-size:clamp(1.3em,2.2vw,1.8em); }
  .ch-riga-testo p  { margin:0 0 16px; opacity:.92; }
  /* Sul telefono si impila sempre, immagine sopra e testo sotto, qualunque
     fosse il lato: affiancare due colonne su uno schermo stretto non si legge. */
  @media (max-width:760px) {
    /* stretch: impilando, immagine e testo devono prendere tutta la larghezza,
       altrimenti con align-items:center resterebbero stretti al centro. */
    .ch-sezione-riga, .ch-sezione-riga.ch-riga-destra { flex-direction:column; gap:18px; align-items:stretch; }
  }
  /* Su telefono e per chi ha chiesto meno movimento: niente video di sfondo
     (batteria e traffico), niente parallasse. Resta l'immagine di ripiego. */
  @media (max-width:760px) {
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-sezione { padding:40px 18px; }
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-sezione.ch-sezione-parallasse { background-attachment:scroll; }
    .ch-sezione-colonne { grid-template-columns:1fr; gap:22px; }
    .ch-sezione-video { display:none; }
  }
  @media (prefers-reduced-motion: reduce) { .ch-sezione-video { display:none; } }
  /* 2.1.7 — FONDO DEL BLOCCO. L'involucro resta largo quanto la colonna (i
     blocchi dentro si impaginano come sempre); la fascia colorata la disegna
     uno pseudo-elemento largo quanto lo schermo, dietro al contenuto. Blocchi
     consecutivi con lo stesso fondo si toccano: una fascia sola. flow-root
     tiene dentro i margini dei figli, altrimenti fra due blocchi resterebbe
     una striscia bianca. */
  /* La fascia si allarga con un'ombra piena ritagliata sui soli lati: nessun
     elemento largo 100vw, quindi nessuno scorrimento orizzontale e nessun
     bisogno di tagliare la pagina (overflow) — che nasconderebbe le tabelle larghe. */
  :is(main.ch-main, main.ch-landing, .ch-content-card) > .ch-fondo { display:flow-root; padding:14px 0;
    background:var(--ch-fondo); box-shadow:0 0 0 100vmax var(--ch-fondo); clip-path:inset(0 -100vmax); }
  /* Nel layout «moderno» ogni figlio di main riceve lo sfondo della pagina
     (regola piu' specifica): il fondo e i suoi blocchi vanno riaffermati. */
  /* Classe raddoppiata: la regola del moderno ha la stessa forza e sta piu'
     sotto nel foglio, quindi a parita' vincerebbe lei. */
  body.ch-layout-moderno :is(main.ch-main, .ch-content-card) > .ch-fondo.ch-fondo { background:var(--ch-fondo); }
  body.ch-layout-moderno :is(main.ch-main, .ch-content-card) > .ch-fondo.ch-fondo > * { background:transparent; }
  :is(main.ch-main, main.ch-landing, .ch-content-card) > .ch-fondo.ch-fondo-chiaro,
  :is(main.ch-main, main.ch-landing, .ch-content-card) > .ch-fondo.ch-fondo-chiaro :is(h1,h2,h3,h4,h5,p,li,blockquote,figcaption) { color:#fff; }
  /* 2.1.7 — fascia compatta e fascia «invito all'azione» (titolo a sinistra,
     pulsanti a destra); immagine con larghezza massima, centrata. */
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-sezione.ch-sezione-compatta { padding:22px 22px; }
  .ch-sezione-compatta .ch-sezione-testa { margin:0 0 14px; }
  .ch-sezione-compatta .ch-sezione-testa h2, .ch-sezione-compatta .ch-sezione-testa h1 { font-size:clamp(1.3em,2.2vw,1.7em); }
  .ch-sezione-in-linea { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .ch-sezione-in-linea .ch-sezione-testa { margin:0; flex:1 1 420px; }
  .ch-sezione-pulsanti { display:flex; gap:12px; flex-wrap:wrap; }
  .ch-sezione-compatta .ch-sezione-colonne .ch-sezione-col:only-child { text-align:center; }
  .ch-blocco-immagine.ch-immagine-misurata img { margin-left:auto; margin-right:auto; }
  /* 2.2.4 — l'immagine piccola sta al centro: la sua didascalia la segue
     (un marchio con il motto sotto), invece di restare a sinistra. */
  .ch-blocco-immagine.ch-immagine-misurata figcaption { text-align:center; margin-top:10px; }

  /* ── AVVISO IN EVIDENZA ──────────────────────────────────────────────── */
  .ch-avviso { --ch-tono:#6b7280; border-left:4px solid var(--ch-tono);
    background:color-mix(in srgb, var(--ch-tono) 8%, transparent);
    padding:15px 18px; border-radius:0 8px 8px 0; margin:22px 0; }
  /* color-mix non e' ovunque: senza, resta il fondo neutro qui sotto, che e'
     leggibile lo stesso. La barra colorata a sinistra basta a distinguere. */
  @supports not (background: color-mix(in srgb, red 8%, transparent)) {
    .ch-avviso { background:rgba(0,0,0,.04); }
  }
  .ch-avviso strong { display:block; margin-bottom:4px; color:var(--ch-tono); }
  .ch-avviso p { margin:0; }
  .ch-avviso-nota       { --ch-tono:#4b7bd4; }
  .ch-avviso-attenzione { --ch-tono:#c98a1b; }
  .ch-avviso-positivo   { --ch-tono:#2e9968; }
  .ch-avviso-importante { --ch-tono:#c4453f; }

  /* ── SEPARATORI ──────────────────────────────────────────────────────── */
  /* 2.1.7 — LARGHEZZA DEL FILO. <main> e' una colonna flessibile: un <hr>
     senza larghezza dichiarata, con i margini automatici della colonna di
     lettura, si restringeva a ZERO pixel e il separatore non si vedeva su
     nessun sito (trovato riproducendo bmdnet.it: sei fili, tutti larghi 0). */
  hr.ch-separatore { width:100%; box-sizing:border-box; align-self:stretch; }
  .ch-separatore.ch-sep-punti { border:0; height:6px;
    background:radial-gradient(circle, var(--ch-primario) 1.6px, transparent 1.8px) repeat-x center;
    background-size:14px 6px; opacity:.6; }
  .ch-separatore.ch-sep-zigzag { border:0; height:10px; opacity:.55;
    background:linear-gradient(135deg, var(--ch-primario) 25%, transparent 25%) repeat-x,
               linear-gradient(225deg, var(--ch-primario) 25%, transparent 25%) repeat-x;
    background-size:14px 10px; }
  .ch-separatore-testo { display:flex; align-items:center; gap:16px; margin:30px 0;
    font-family:var(--ch-font-interfaccia); font-size:.82em; letter-spacing:.14em;
    text-transform:uppercase; opacity:.6; }
  .ch-separatore-testo::before, .ch-separatore-testo::after {
    content:''; flex:1; height:1px; background:currentColor; opacity:.35; }
  .ch-separatore-testo.ch-sep-punti::before, .ch-separatore-testo.ch-sep-punti::after {
    height:6px; background:radial-gradient(circle, currentColor 1.6px, transparent 1.8px) repeat-x center;
    background-size:14px 6px; }

  /* ── RECENSIONI ──────────────────────────────────────────────────────── */
  .ch-recensioni { margin:34px 0; }
  .ch-recensioni-titolo { text-align:center; margin:0 0 22px; }
  .ch-recensioni-elenco { display:grid; gap:20px; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .ch-recensioni[data-ch-colonne="1"] .ch-recensioni-elenco { grid-template-columns:1fr; }
  .ch-recensioni[data-ch-colonne="2"] .ch-recensioni-elenco { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ch-recensione { margin:0; padding:22px 24px; border:1px solid rgba(0,0,0,.09); border-radius:10px;
    background:rgba(0,0,0,.015); display:flex; flex-direction:column; gap:12px; }
  /* Il testo NON e' in corsivo per tutta la sua lunghezza: un paragrafo lungo
     in corsivo si legge peggio, e queste sono testimonianze intere, non
     frasi a effetto. La virgoletta iniziale basta a dire che e' una voce. */
  .ch-recensione blockquote { margin:0; padding:0; border:0; font-size:.98em; line-height:1.6; }
  .ch-recensione blockquote::before { content:'\201C'; font-size:2.2em; line-height:0; vertical-align:-.35em;
    color:var(--ch-primario); margin-right:4px; }
  .ch-recensione-voto { color:var(--ch-primario); letter-spacing:2px; font-size:1.05em; }
  .ch-recensione-firma { display:flex; align-items:center; gap:12px; margin-top:auto; font-style:normal; }
  .ch-recensione-firma img { width:46px; height:46px; border-radius:50%; object-fit:cover; flex:0 0 46px; }
  .ch-recensione-firma strong { display:block; font-family:var(--ch-font-interfaccia); font-size:.95em; }
  .ch-recensione-firma em { display:block; font-style:normal; font-size:.85em; opacity:.6; }
  /* Testo riservato a chi legge con un lettore di schermo: fuori dalla vista
     ma DENTRO la pagina. `display:none` lo toglierebbe anche a loro. */
  .ch-solo-lettori { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  @media (max-width: 860px) { .ch-recensioni-elenco { grid-template-columns:1fr !important; } }

  /* In carosello le schede scorrono in orizzontale con lo scatto: nessuna
     libreria, e col dito funziona come ci si aspetta. */
  .ch-recensioni-carosello .ch-recensioni-elenco { display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:20px; padding-bottom:10px; }
  .ch-recensioni-carosello .ch-recensione { flex:0 0 min(360px, 82%); scroll-snap-align:start; }
  /* 2.2.5 — FRECCE DELLE FASCE A SCORRIMENTO (schede e recensioni). Le mette
     lo script sotto: senza frecce una fascia orizzontale sembra finire dove
     finisce lo schermo, e chi usa il mouse non sa che si puo' scorrere. */
  .ch-scorri-box { position:relative; }
  .ch-scorri-freccia { position:absolute; z-index:3; transform:translateY(-50%); width:42px; height:42px;
    border-radius:50%; border:1px solid rgba(0,0,0,.12); background:var(--ch-sfondo); color:var(--ch-testo);
    box-shadow:0 2px 10px rgba(0,0,0,.12); font-size:22px; line-height:1; cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center; }
  .ch-scorri-freccia:hover { color:var(--ch-primario); }
  .ch-scorri-freccia[disabled] { opacity:.35; cursor:default; }
  .ch-scorri-freccia[hidden] { display:none; }
  .ch-scorri-prec { left:6px; } .ch-scorri-succ { right:6px; }

  .ch-hamburger { display:none; cursor:pointer; font-size:1.6em; background:none; border:0; color:var(--ch-testo); line-height:1; }
  header.ch-header nav ul { list-style:none; display:flex; gap:22px; margin:0; padding:0; align-items:center; }
  header.ch-header nav ul ul { list-style:none; position:absolute; background:var(--ch-sfondo); padding:10px; border:1px solid rgba(0,0,0,.08); margin-top:8px; border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,.08); }
  header.ch-header nav a { color: var(--ch-testo); text-decoration:none; font-size:.96em; font-family: var(--ch-font-interfaccia); }
  header.ch-header nav a:hover { color: var(--ch-primario); }
  /* TESTATA CON HAMBURGER SEMPRE (tema: header_stile = "hamburger").
     Il pulsante e' tondo, come nei siti che lo usano anche su desktop, e il
     menu scende a tendina allineato a destra invece di occupare tutta la
     riga: su schermo grande una tendina larga quanto la pagina sembra un
     errore, non una scelta. */
  body.ch-header-hamburger .ch-hamburger {
    display:flex; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:50%; font-size:1.15em;
    border:1px solid rgba(0,0,0,.14); background:var(--ch-sfondo); color:var(--ch-testo);
    transition:background .15s, color .15s, border-color .15s; }
  body.ch-header-hamburger .ch-hamburger:hover { background:var(--ch-primario); border-color:var(--ch-primario); color:#fff; }
  /* Variante quadrata: stesso pulsante, angoli appena ammorbiditi. Un quadrato
     perfetto sembra un errore di stile; 8px bastano a farlo leggere come una
     scelta. */
  body.ch-hamburger-quadrato .ch-hamburger { border-radius:8px; }
  /* ICONE DEI BLOCCHI: SVG disegnati dal modulo, colorati col tema. */
  main.ch-main .ch-colonna-icona { display:block; color:var(--ch-primario); margin:0 0 12px; }
  main.ch-main .ch-colonna-icona .ch-icona { display:block; }
  body.ch-header-hamburger header.ch-header nav {
    display:none; position:absolute; top:100%; right:5vw; min-width:230px;
    background:var(--ch-sfondo); border:1px solid rgba(0,0,0,.10); border-radius:10px;
    box-shadow:0 12px 34px rgba(0,0,0,.14); padding:14px 20px; z-index:30; }
  body.ch-header-hamburger header.ch-header nav ul { flex-direction:column; align-items:flex-start; gap:12px; }
  body.ch-header-hamburger header.ch-header nav ul ul { position:static; box-shadow:none; border:0; padding:6px 0 0 12px; margin-top:4px; }
  body.ch-header-hamburger #ch-menu-toggle:checked ~ nav { display:block; }
  @media (max-width: 780px) {
    body.ch-header-hamburger header.ch-header nav { right:0; left:0; border-radius:0; }
    .ch-hamburger { display:block; }
    header.ch-header nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--ch-sfondo); border-top:1px solid rgba(0,0,0,.08); padding:12px 5vw; z-index:20; }
    header.ch-header nav ul { flex-direction:column; align-items:flex-start; gap:12px; }
    header.ch-header nav ul ul { position:static; box-shadow:none; margin-top:6px; }
    #ch-menu-toggle:checked ~ nav { display:block; }
  }
  /* Il riempimento non cresce con lo schermo: con 5vw, su un monitor largo
     quasi 200px se ne andavano in aria dentro una colonna gia' limitata a
     920px, e il testo si stringeva proprio dove c'era piu' spazio. */
  main.ch-main { padding:0 clamp(18px, 4vw, 44px) 48px; }
  /* FOOTER. Un sito aziendale chiude dando informazioni utili — dove siamo,
     come contattarci, cosa fare adesso — non con una riga di copyright. */
  /* Footer minimo: nessuna colonna, solo la barra. Senza questa regola
     restava il bordo di separazione da un blocco che non c'e' piu'. */
  footer.ch-footer.ch-footer-minimo .ch-footer-basso { border-top:0; }
  footer.ch-footer.ch-footer-minimo .ch-footer-basso-inner { padding-top:26px; padding-bottom:26px; }
  footer.ch-footer { margin-top:64px; font-size:.94em;
    background:color-mix(in srgb, var(--ch-testo) 94%, #000 6%); color:rgba(255,255,255,.76); }
  footer.ch-footer a { color:rgba(255,255,255,.86); text-decoration:none; }
  footer.ch-footer a:hover { color:#fff; text-decoration:underline; }
  /* 2.8.4 — link DENTRO un testo del pie' (copyright, testo libero): sottolineati,
     si riconoscono senza dipendere dal colore (contrasto basso col testo intorno). */
  footer.ch-footer .ch-footer-copyright a, footer.ch-footer .ch-footer-testo a { text-decoration:underline; text-underline-offset:2px; }
  footer.ch-footer .ch-footer-griglia { max-width:1180px; margin:0 auto; padding:48px 5vw 30px;
    display:grid; grid-template-columns:1.6fr 1.1fr .9fr 1.1fr; gap:30px 40px; align-items:start; }
  @media (max-width:860px) { footer.ch-footer .ch-footer-griglia { grid-template-columns:1fr 1fr; gap:30px; } }
  @media (max-width:520px) { footer.ch-footer .ch-footer-griglia { grid-template-columns:1fr; } }
  footer.ch-footer h4 { font-family:var(--ch-font-interfaccia); color:#fff; font-size:.74em;
    letter-spacing:.14em; text-transform:uppercase; margin:0 0 13px; opacity:.6; font-weight:600; }
  footer.ch-footer .ch-footer-lingue { display:inline-flex; gap:8px; margin:0; vertical-align:middle; }
  footer.ch-footer .ch-pallino-lingua {
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%; font-size:.72em; letter-spacing:.04em;
    font-family:var(--ch-font-interfaccia); text-decoration:none;
    border:1px solid rgba(255,255,255,.28); color:rgba(255,255,255,.82);
    transition:background .15s, color .15s, border-color .15s; }
  footer.ch-footer a.ch-pallino-lingua:hover { background:#fff; color:var(--ch-testo); border-color:#fff; }
  /* La lingua in cui si sta leggendo e' piena e non cliccabile: si vede
     subito dove si e', senza dover leggere quale delle due e' accesa. */
  footer.ch-footer .ch-pallino-lingua.ch-attuale { background:var(--ch-primario); border-color:var(--ch-primario); color:#fff; cursor:default; }

  footer.ch-footer .ch-footer-marchio { font-family:var(--ch-font-interfaccia); color:#fff;
    font-size:1.05em; font-weight:700; margin:0 0 10px; letter-spacing:-.005em; }
  footer.ch-footer .ch-footer-marchio img { max-height:42px; width:auto; margin-bottom:2px; }
  footer.ch-footer .ch-footer-copyright .ch-footer-logo { display:block; max-height:40px; width:auto; margin:0 0 12px; }
  footer.ch-footer .ch-footer-testo { margin:0; max-width:38ch; line-height:1.65; font-size:.94em; opacity:.82; }
  footer.ch-footer ul { list-style:none; margin:0; padding:0; }
  footer.ch-footer li { margin:0 0 8px; font-size:.95em; }
  footer.ch-footer .ch-footer-contatti li { display:flex; gap:9px; align-items:flex-start; }
  footer.ch-footer .ch-footer-contatti .ch-et { opacity:.55; min-width:4.6em; }
  footer.ch-footer .ch-footer-cta { display:inline-block; background:var(--ch-accento); color:#fff;
    padding:9px 18px; border-radius:5px; font-weight:600; font-size:.92em; line-height:1.3;
    margin:0 0 10px; white-space:nowrap; }
  footer.ch-footer .ch-footer-cta:hover { color:#fff; text-decoration:none; filter:brightness(1.08); }
  footer.ch-footer .ch-footer-social { margin:0; display:flex; gap:18px; flex-wrap:wrap; }
  footer.ch-footer .ch-footer-social a { font-weight:500; opacity:.86; }
  footer.ch-footer .ch-footer-social a:hover { opacity:1; }
  footer.ch-footer .ch-footer-basso { border-top:1px solid rgba(255,255,255,.12); }
  /* Barra di chiusura: copyright a sinistra, note legali e social raccolti a
     destra. Prima erano tre blocchi liberi in un flex: alla prima riga stretta
     le note legali andavano a capo da sole sotto il copyright, e sembravano
     una riga fuori posto invece che una parte del footer. */
  footer.ch-footer .ch-footer-basso-inner { max-width:1180px; margin:0 auto;
    /* Su uno schermo largo 5vw sono quasi 100px per lato: restava troppo poco
       spazio e le note legali andavano a capo per una manciata di pixel. */
    padding:16px clamp(18px, 5vw, 56px);
    display:flex; justify-content:space-between; align-items:center; gap:8px 28px; flex-wrap:wrap;
    font-size:.86em; opacity:.72; }
  footer.ch-footer .ch-footer-copyright { flex:0 1 auto; min-width:0; }
  footer.ch-footer .ch-footer-basso-destra { display:flex; align-items:center; gap:10px 26px; flex-wrap:wrap; }
  footer.ch-footer .ch-footer-basso-destra .ch-sep { opacity:.3; }
  @media (max-width:760px) {
    footer.ch-footer .ch-footer-basso-inner { flex-direction:column; align-items:flex-start; gap:10px; }
    footer.ch-footer .ch-footer-basso-destra { gap:8px 18px; }
  }
  footer.ch-footer .ch-footer-copyright { margin:0; }
  body.ch-layout-classico header.ch-header { border-bottom:1px solid rgba(0,0,0,.08); }
  body.ch-layout-classico main.ch-main { max-width:920px; margin:0 auto; padding-top:36px; }
  body.ch-layout-classico main.ch-main h1 { color: var(--ch-secondario); font-size:2em; }
  body.ch-layout-classico .ch-btn, body.ch-layout-classico main.ch-main a.button { background:var(--ch-accento); color:#fff; padding:10px 22px; border-radius:5px; display:inline-block; text-decoration:none; }
  body.ch-layout-moderno { background: color-mix(in srgb, var(--ch-sfondo) 96%, #000 4%); }
  body.ch-layout-moderno header.ch-header { background:var(--ch-sfondo); box-shadow:0 1px 6px rgba(0,0,0,.05); }
  body.ch-layout-moderno main.ch-main { max-width:960px; margin:0 auto; padding-top:36px; }
  body.ch-layout-moderno :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > * { background:var(--ch-sfondo); }
  body.ch-layout-moderno .ch-content-card { background:var(--ch-sfondo); border-radius:14px; box-shadow:0 4px 18px rgba(0,0,0,.08); padding:36px; }
  body.ch-layout-moderno main.ch-main h1 { color: var(--ch-secondario); font-size:2.1em; }
  body.ch-layout-moderno .ch-btn, body.ch-layout-moderno main.ch-main a.button { background:var(--ch-accento); color:#fff; padding:11px 26px; border-radius:24px; display:inline-block; text-decoration:none; }
  body.ch-layout-minimal header.ch-header { padding-top:28px; }
  body.ch-layout-minimal main.ch-main { max-width:740px; margin:0 auto; padding-top:30px; }
  body.ch-layout-minimal main.ch-main h1 { color: var(--ch-testo); font-weight:600; font-size:2em; letter-spacing:-.01em; }
  body.ch-layout-minimal .ch-btn, body.ch-layout-minimal main.ch-main a.button { background:transparent; color:var(--ch-accento); border:1px solid var(--ch-accento); padding:9px 20px; border-radius:2px; display:inline-block; text-decoration:none; }
  /* LARGHEZZA DEL CORPO. Il testo resta su una misura leggibile (righe troppo
     lunghe si leggono male), ma tutto cio' che NON e' testo — widget del
     negozio o degli immobili, video, gallerie, elenco articoli — esce dalla
     colonna e usa lo schermo. Su desktop un catalogo prodotti stretto in
     880px mostrava due articoli per riga con mezzo schermo vuoto. */
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-widget-shop,
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-widget-immobili,
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-widget-video,
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-articoli-griglia,
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-esteso,
  /* Le gallerie composte a mano nel corpo (griglie di figure) seguono la
     stessa regola: sono immagini, non testo. */
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > div[style*="grid-template-columns"] {
    /* PERCHE' !important anche sulla larghezza: piu' sotto la regola della
       colonna di lettura elenca ":is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > figure" con max-width:42rem.
       Ha la stessa specificita' e viene dopo, quindi vinceva lei sulla
       larghezza mentre i margini restavano questi, calcolati per 1240px:
       una figura larga 672px riceveva margini da 1240px e si spostava di
       oltre 200px a sinistra. Larghezza e margini devono decidersi insieme. */
    width: min(1240px, 94vw) !important;
    max-width: min(1240px, 94vw) !important;
    /* PERCHE' !important, che di norma qui non si usa: queste griglie sono
       scritte nel corpo del contenuto con lo stile IN LINEA (margin:14px 0),
       e un attributo style batte sempre il foglio di stile. Senza !important
       si applicava la larghezza ma non il margine: il blocco cresceva solo
       verso destra e la pagina appariva sbilanciata. Si forzano SOLO i
       margini orizzontali; quelli verticali restano di chi scrive.
       Forma scelta: 50% del contenitore meno mezza larghezza del blocco —
       non dipende da 100%, e si legge per quello che fa (centrare). */
    margin-left: calc(50% - min(1240px, 94vw) / 2) !important;
    margin-right: calc(50% - min(1240px, 94vw) / 2) !important;
  }
  @media (max-width: 980px) {
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-widget-shop,
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-widget-immobili,
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-widget-video,
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-articoli-griglia,
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-esteso,
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > div[style*="grid-template-columns"] { width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; }
  }

  /* FASCIA A TUTTA PAGINA (blocco immagine con effetto).
     Esce dalla colonna e dal contenitore: e' il fondo di una sezione, non una
     figura nel testo. La velatura arriva gia' dall'HTML, cosi' il testo sopra
     resta leggibile su qualunque fotografia. */
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-fascia {
    width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    min-height: min(62vh, 520px);
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    color: #fff; padding: 48px 5vw; margin-top: 34px; margin-bottom: 34px;
  }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-fascia-parallasse { background-attachment: fixed; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-fascia .ch-fascia-testo { max-width: 900px; text-align: center; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-fascia .ch-fascia-testo h2 {
    color: #fff; margin: 0 0 10px; font-size: clamp(1.7em, 3.4vw, 2.6em);
    line-height: 1.15; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-fascia .ch-fascia-testo p { margin: 0; font-size: clamp(1em, 1.6vw, 1.2em); opacity: .95; }
  @media (max-width: 900px) {
    /* Il fondo fisso e' rotto sui browser dei telefoni da sempre (iOS lo
       ignora e su Android salta): li' si torna al fondo che scorre, che e'
       corretto invece che quasi corretto. */
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-fascia-parallasse { background-attachment: scroll; }
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-fascia { min-height: 46vh; }
  }
  @media (prefers-reduced-motion: reduce) {
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-fascia-parallasse { background-attachment: scroll; }
  }
  /* TESTO SU PIU' COLONNE — [bmdnet_colonne n="2"]...[/bmdnet_colonne].
     Le colonne hanno bisogno di piu' larghezza della misura di lettura (una
     colonna stretta divisa in due darebbe righe di sei parole), quindi il
     blocco esce dalla colonna come i riquadri. Sotto i 760px torna a una
     colonna sola: nessuno legge un giornale a tre colonne su un telefono. */
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne {
    width: min(1040px, 94vw);
    margin-left: calc(50% - min(1040px, 94vw) / 2) !important;
    margin-right: calc(50% - min(1040px, 94vw) / 2) !important;
    column-count: var(--ch-colonne, 2);
    column-gap: 40px;
  }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne > * { break-inside: avoid-column; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne > *:first-child { margin-top: 0; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne img { width: 100%; }
  /* COLONNE SFALSATE (corretto nella 2.1.5). Nelle colonne di testo del CSS
     il margine superiore del primo elemento viene tagliato nelle colonne
     2..n ma NON nella prima: il titolo della prima colonna partiva piu' in
     basso degli altri. Visto su un sito pubblicato. Quando le colonne sono
     BLOCCHI (.ch-colonna, dal compositore) il contenitore diventa una
     griglia con le colonne allineate in alto — e' cio' che ci si aspetta da
     tre riquadri affiancati. Il flusso a giornale resta per il testo libero
     scritto con lo shortcode. La regola sul margine vale comunque, per i
     browser che non conoscono :has(). */
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne .ch-colonna > :first-child { margin-top: 0; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne:has(> .ch-colonna),
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne.ch-colonne-blocchi {
    column-count: auto; display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 40px; align-items: start;
  }
  /* Il numero di colonne scritto per esteso, non con una variabile dentro
     repeat(): alcuni browser scartano la dichiarazione e le colonne si
     impilano (visto su un sito pubblicato). L'attributo lo scrive il CRM
     dalla 2.1.5; per i corpi piu' vecchi resta la variabile. */
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne[data-ch-colonne="3"], :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne[style*="--ch-colonne:3"]:has(> .ch-colonna) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 2.5.0 — anche una colonna sola e quattro colonne (sotto i 980px quattro
     diventano due, sotto i 760px una come le altre). */
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne[data-ch-colonne="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 26px; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne[data-ch-colonne="1"] { grid-template-columns: minmax(0, 1fr); }
  @media (max-width: 980px) {
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne[data-ch-colonne="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne { width:100%; margin-left:0 !important; margin-right:0 !important; column-count:1; }
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne:has(> .ch-colonna), :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne.ch-colonne-blocchi,
    :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne[data-ch-colonne="3"], :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-colonne[data-ch-colonne="4"] { grid-template-columns: 1fr; }
  }
  main.ch-main .ch-immagine-evidenza { border-radius:8px; margin-bottom:20px; }
  /* APERTURA DELL'ARTICOLO. L'immagine in evidenza non è una figura qualsiasi
     dentro il testo: è ciò che dà il tono al pezzo. Diventa quindi una fascia
     a tutta larghezza con il titolo sopra, e il titolo nel flusso sparisce
     (non va ripetuto due volte). */
  .ch-articolo-hero { position:relative; width:100vw; margin-left:calc(50% - 50vw);
    margin-bottom:40px; min-height:clamp(300px, 48vh, 480px);
    background-size:cover; background-position:center; display:flex; align-items:flex-end; }
  .ch-articolo-hero::after { content:''; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.74) 26%, rgba(0,0,0,.38) 58%, rgba(0,0,0,.06) 88%); }
  .ch-articolo-hero-testo { position:relative; z-index:2; max-width:1180px; width:100%;
    margin:0 auto; padding:0 5vw 44px; color:#fff; }
  /* Specificità: le regole di layout (body.ch-layout-X main.ch-main h1)
     imponevano il colore del tema al titolo dell'hero, che finiva grigio
     su fondo scuro. Questo selettore è deliberatamente più specifico. */
  main.ch-main .ch-articolo-hero .ch-articolo-hero-testo h1 { color:#fff; margin:0; font-size:clamp(1.8em, 3.6vw, 2.7em);
    line-height:1.15; letter-spacing:-.02em; text-wrap:balance; max-width:22ch;
    text-shadow:0 1px 3px rgba(0,0,0,.6), 0 3px 24px rgba(0,0,0,.5); }
  .ch-articolo-hero-meta { display:inline-block; font-size:.82em; letter-spacing:.12em;
    text-transform:uppercase; opacity:.8; margin:0 0 12px; }
  main.ch-main:has(> .ch-articolo-hero:first-of-type) { padding-top:0; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-articolo-hero:first-of-type { order:-1; }
  /* Occhiello dell'articolo: la frase di sintesi merita un peso diverso dal corpo. */
  main.ch-main .ch-occhiello { font-size:1.12em; line-height:1.6; opacity:.82;
    /* Stessa misura e stessa centratura del resto del testo: prima aveva
       una larghezza sua e restava spostato a sinistra rispetto al titolo. */
    width:100%; max-width:42rem; margin:0 auto 1.6em; }

  /* ELENCO ARTICOLI a schede, con miniatura. */
  .ch-articoli-griglia { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:26px; margin:26px 0 8px; }
  a.ch-articolo-card { display:flex; flex-direction:column; text-decoration:none; color:inherit;
    border:1px solid rgba(0,0,0,.09); border-radius:12px; overflow:hidden; background:var(--ch-sfondo);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  a.ch-articolo-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.10);
    border-color:rgba(0,0,0,.16); }
  a.ch-articolo-card .ch-card-foto { aspect-ratio:16/10; background-size:cover; background-position:center;
    background-color:rgba(0,0,0,.05); }
  a.ch-articolo-card .ch-card-corpo { padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; }
  a.ch-articolo-card .ch-articolo-data { font-size:.78em; letter-spacing:.1em; text-transform:uppercase;
    opacity:.55; margin:0; }
  a.ch-articolo-card h3 { margin:0; font-size:1.12em; line-height:1.3; letter-spacing:-.01em; text-wrap:balance; }
  a.ch-articolo-card p { margin:0; font-size:.94em; opacity:.78; line-height:1.55; }
  a.ch-articolo-card .ch-card-piu { margin-top:4px; font-size:.88em; font-weight:600; color:var(--ch-primario); }

  /* Icone dei contatti: SVG in linea, nessuna libreria esterna da caricare. */
  footer.ch-footer .ch-footer-contatti li { align-items:flex-start; gap:11px; }
  footer.ch-footer .ch-ico { flex:none; width:15px; height:15px; margin-top:4px; opacity:.5; }
  footer.ch-footer .ch-ico svg { width:15px; height:15px; display:block; fill:none;
    stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  /* Ritmo di lettura: titoli con respiro sopra, testo con misura contenuta. */
  main.ch-main h1 { font-size:clamp(1.9em, 3.4vw, 2.6em); letter-spacing:-.02em; text-wrap:balance; margin:0 0 22px; }
  /* Il colore "secondario" del tema si chiama, nel pannello, «colore dei
     titoli»: fino alla 1.8.1 valeva pero' solo per l'h1, mentre h2/h3/h4
     restavano del colore del testo. Il risultato era che impostandolo non
     succedeva quasi nulla — l'impostazione prometteva piu' di quanto facesse.
     Ora vale per tutti i titoli del contenuto. Restano fuori, con il proprio
     colore esplicito, i titoli su fondo scuro (hero, slider, riquadri,
     footer), dove il colore del tema sarebbe illeggibile. */
  main.ch-main h2 { color: var(--ch-secondario); font-size:clamp(1.35em, 2.2vw, 1.72em); letter-spacing:-.01em; margin:2.1em 0 .55em; text-wrap:balance; }
  /* 2.2.8 — titolo di fascia come H1 («titolo della pagina»): stesso aspetto
     dell'H2 di fascia che sostituisce. Peso (0,2,4): sopra le regole degli
     h1 (main.ch-main h1, body.ch-layout-X main.ch-main h1), sotto la fascia
     a testo chiaro, il fondo chiaro e il CSS aggiuntivo dei siti. */
  html body main.ch-main .ch-sezione-testa h1 { color: var(--ch-secondario); font-size:clamp(1.35em, 2.2vw, 1.72em); font-weight:bold; letter-spacing:-.01em; margin:2.1em 0 .55em; text-wrap:balance; }
  main.ch-main h3 { color: var(--ch-secondario); font-size:clamp(1.1em, 1.6vw, 1.28em); margin:1.7em 0 .45em; }
  main.ch-main h4 { color: var(--ch-secondario); }
  main.ch-main p { margin:0 0 1.15em; }
  /* UNA SOLA MISURA PER TUTTO IL TESTO, E CENTRATA.
     Prima il limite di lettura valeva solo per p/ul/ol: i titoli usavano
     tutta la colonna, i paragrafi si fermavano prima e restavano appoggiati
     a sinistra. Due bordi destri diversi nella stessa colonna e la pagina
     appare sbilanciata, che e' esattamente cio' che si vedeva. Ora ogni
     elemento di testo condivide la stessa larghezza ed e' centrato nella
     colonna: i bordi coincidono a sinistra e a destra. Cio' che non e' testo
     resta fuori da questa regola e continua a uscire dalla colonna. */
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > h1, :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > h2, :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > h3, :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > h4,
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > p, :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > ul, :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > ol,
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > blockquote, :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > figure, :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > table,
  /* I contenitori del compositore a blocchi sono testo a tutti gli effetti e
     devono stare nella STESSA colonna dei titoli. Senza questa riga il testo
     di un blocco occupava tutta la larghezza mentre i titoli restavano alla
     misura di lettura: due bordi sinistri diversi a 80px di distanza, ed e'
     precisamente lo "sbilanciato" che si vedeva sui siti composti a blocchi. */
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-blocco-testo, :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-blocco-cta,
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-occhiello {
    /* Misura FISSA, non in 'ch': l'unita' ch cresce con la dimensione del
       carattere, quindi un titolo grande diventava piu' largo del testo e i
       bordi sinistri non coincidevano piu' (296, 362, 282... a scaletta).
       In rem tutti gli elementi condividono la stessa identica scatola. */
    /* width:100% NON e' ridondante: main.ch-main e' un contenitore flex in
       colonna, e in un flex i margini automatici sull'asse trasversale
       DISATTIVANO l'allungamento — ogni elemento si restringeva al proprio
       contenuto, con i bordi sinistri a scaletta (296, 362, 289, 307...).
       Con width:100% ogni elemento prende tutta la colonna, il limite lo
       ferma alla misura di lettura e i margini automatici lo centrano. */
    width:100%; max-width:42rem; margin-left:auto; margin-right:auto;
  }
  main.ch-main ul, main.ch-main ol { padding-left:1.25em; }
  main.ch-main li { margin:.4em 0; }
  main.ch-main img { border-radius:10px; }
  main.ch-main figure { margin:0; }
  /* L'immagine si CENTRA nella figura. Una fotografia piu' stretta del
     riquadro — tipico dell'immagine "estesa", che apre fino a 1240px mentre
     il file ne misura 600 — restava appoggiata a sinistra, fuori asse
     rispetto alla colonna del testo: la pagina appariva sbilanciata pur
     essendo ogni singolo pezzo al suo posto. */
  main.ch-main figure > img { display:block; margin-left:auto; margin-right:auto; max-width:100%; height:auto; }
  main.ch-main figcaption { font-size:.86em; opacity:.66; padding-top:8px; }
  /* Solo dove l'immagine e' centrata la didascalia la segue: nella colonna di
     lettura la fotografia riempie la misura e la didascalia resta allineata
     al testo, come il resto della pagina. */
  main.ch-main .ch-esteso > figcaption, main.ch-main .ch-piena > figcaption { text-align:center; }
  main.ch-main blockquote { margin:1.8em auto; padding:2px 0 2px 22px;
    border-left:3px solid var(--ch-accento); font-size:1.06em; line-height:1.6; opacity:.9; }
  main.ch-main a { text-underline-offset:2px; }
  /* Intestazione sempre visibile: su un sito lungo evita di dover risalire. */
  header.ch-header { position:sticky; top:0; z-index:30;
    background:color-mix(in srgb, var(--ch-sfondo) 88%, transparent); backdrop-filter:blur(10px); }
  /* 2.6.7 — ANCORE SOTTO LA TESTATA. La testata resta sopra la pagina (sticky,
     o fissa se trasparente): un salto a #contenuto, a un blocco o all'esito
     del modulo contatti (?modulo=ok#ch-modulo-contatti) fermava l'inizio del
     bersaglio sotto di lei, e il messaggio «inviato» restava coperto. Ogni
     elemento con id si ferma piu' in basso dell'altezza VERA della testata,
     misurata dallo script dopo l'header (--ch-testata-ancora), piu' 12px
     di respiro; senza JavaScript 90px in tutto, come le ancore dei blocchi
     dalla 2.4.3. La landing non ha testata: nessuno spazio. */
  body:not(.ch-landing-body) [id] { scroll-margin-top:calc(var(--ch-testata-ancora, 78px) + 12px); }
  .ch-articolo-card { display:block; padding:18px 0; border-bottom:1px solid rgba(0,0,0,.07); text-decoration:none; color:inherit; }
  .ch-articolo-card h3 { margin:0 0 6px; color:var(--ch-secondario); }
  .ch-articolo-card p { margin:0; color:var(--ch-testo); opacity:.85; }
  .ch-articolo-data { font-size:.8em; color:#999; margin-bottom:4px; display:block; }
  .ch-ricerca-form { display:flex; gap:8px; margin-bottom:24px; }
  .ch-ricerca-form input[type=search] { flex:1; padding:9px 12px; border:1px solid #ddd; border-radius:5px; font-size:1em; }
  .ch-ricerca-form button { padding:9px 18px; border:0; border-radius:5px; background:var(--ch-accento); color:#fff; cursor:pointer; }
  /* Filtri per categoria dell'elenco articoli: pulsanti in linea, quello
     attivo pieno. Il colore della categoria, se impostato, arriva come
     variabile --ch-chip; senza, si usa il primario del tema, cosi' un sito
     che non colora le categorie resta comunque coerente. */
  .ch-cat-filtri { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
  .ch-cat-chip { --ch-chip: var(--ch-primario); font-family: var(--ch-font-interfaccia);
    display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px;
    border:1px solid var(--ch-chip); color:var(--ch-chip); background:transparent;
    text-decoration:none; font-size:.9em; font-weight:600; line-height:1.4; transition:background .15s, color .15s; }
  .ch-cat-chip:hover { background:color-mix(in srgb, var(--ch-chip) 12%, transparent); }
  .ch-cat-chip.attiva { background:var(--ch-chip); color:#fff; }
  .ch-cat-chip .ch-cat-n { font-size:.82em; opacity:.75; font-weight:500; }
  .ch-card-cat { --ch-chip: var(--ch-primario);
    display:inline-block; margin-left:8px; padding:1px 9px; border-radius:999px;
    background:color-mix(in srgb, var(--ch-chip) 14%, transparent); color:var(--ch-chip);
    font-weight:600; font-size:.94em; }
  .ch-articolo-categoria { --ch-chip: var(--ch-primario);
    display:inline-block; margin-bottom:10px; padding:3px 12px; border-radius:999px;
    background:var(--ch-chip); color:#fff; text-decoration:none; font-size:.82em; font-weight:600; }
  .ch-pag-stato { align-self:center; font-size:.9em; opacity:.7; }
  .ch-paginazione { display:flex; gap:10px; justify-content:center; margin-top:28px; }
  .ch-paginazione a { padding:6px 14px; border:1px solid #ddd; border-radius:5px; text-decoration:none; color:var(--ch-testo); }
  a.ch-widget-cta { display:inline-block; background:var(--ch-accento); color:#fff; padding:12px 26px; border-radius:6px; text-decoration:none; font-weight:600; margin:10px 0; }
  /* Riquadri incorporati: video e vetrine di altri moduli. Il video mantiene
     le proporzioni 16:9 senza JavaScript; le vetrine ricevono tutta la
     larghezza della colonna di lettura. */
  .ch-widget-video { margin:26px 0; border-radius:12px; overflow:hidden; background:#000;
    box-shadow:0 8px 26px rgba(0,0,0,.12); }
  .ch-widget-video iframe, .ch-widget-video video { display:block; width:100%; aspect-ratio:16/9; border:0; }
  .ch-widget-shop, .ch-widget-immobili { margin:26px 0; border-radius:12px; overflow:hidden;
    border:1px solid rgba(0,0,0,.09); }
  /* cornice="no" nello shortcode: il riquadro si fonde con la pagina */
  .ch-widget-shop.ch-senza-cornice, .ch-widget-immobili.ch-senza-cornice { border:0; border-radius:0; }
  .ch-widget-shop iframe, .ch-widget-immobili iframe { display:block; width:100%; border:0; min-height:620px; }
  /* Prenotazione appuntamenti e questionario di pre-analisi (2.1.7): stessi
     riquadri del negozio, l'altezza la adatta il runtime dei riquadri. */
  .ch-widget-appuntamenti, .ch-widget-pre-analisi { margin:26px 0; border-radius:12px; overflow:hidden; border:1px solid rgba(0,0,0,.09); }
  .ch-widget-appuntamenti.ch-senza-cornice, .ch-widget-pre-analisi.ch-senza-cornice { border:0; border-radius:0; }
  .ch-widget-appuntamenti iframe, .ch-widget-pre-analisi iframe { display:block; width:100%; border:0; min-height:720px; }
  /* 2.4.4 — form delle proposte degli autori: stesso riquadro, piu' alto. */
  .ch-widget-proposte { margin:26px 0; border-radius:12px; overflow:hidden; border:1px solid rgba(0,0,0,.09); }
  .ch-widget-proposte.ch-senza-cornice { border:0; border-radius:0; }
  .ch-widget-proposte iframe { display:block; width:100%; border:0; min-height:1300px; }
  /* MODULO CONTATTI (2.1.7). Campi a sinistra, messaggio a destra come nei
     moduli dei siti d'origine; su schermo stretto tutto in colonna. La
     colonna a lato (recapiti) si affianca al modulo su desktop. */
  .ch-modulo-blocco { margin:34px 0; display:grid; gap:36px; grid-template-columns:1fr; }
  .ch-modulo-blocco.ch-modulo-con-lato { grid-template-columns:2fr 1fr; }
  .ch-modulo-titolo { font-size:1.05em; font-weight:700; margin:0 0 18px; }
  .ch-modulo { display:grid; grid-template-columns:1fr 2fr; gap:14px 18px; }
  .ch-modulo-campi { display:flex; flex-direction:column; gap:14px; }
  .ch-modulo input[type=text], .ch-modulo input[type=email], .ch-modulo input[type=tel], .ch-modulo textarea, .ch-modulo select {
    width:100%; box-sizing:border-box; font:inherit; font-size:.95em; color:inherit; background:rgba(0,0,0,.045);
    border:1px solid rgba(0,0,0,.12); border-radius:0; padding:12px 14px; }
  /* 2.4.3 — menu del tipo di richiesta: la freccia e' disegnata, quella del sistema cambia da un browser all'altro. */
  .ch-modulo select { appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
    background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size:6px 6px; background-repeat:no-repeat; }
  .ch-modulo select:invalid { color:rgba(0,0,0,.55); }
  .ch-modulo select option { color:#1d1d1d; }
  .ch-modulo textarea { min-height:170px; resize:vertical; }
  .ch-modulo input:focus, .ch-modulo textarea:focus, .ch-modulo select:focus { outline:2px solid var(--ch-accento); outline-offset:1px; }
  .ch-modulo-privacy { display:flex; gap:8px; align-items:flex-start; margin-top:12px; font-weight:600; font-size:.92em; }
  .ch-modulo-privacy a { color:inherit; }
  /* 2.6.1 — caselle a scelta multipla del tipo di richiesta: una per riga nella colonna stretta
     dei campi (scritte dentro i campi), due per riga quando i campi vanno a tutta riga (scritte
     sopra), una sul telefono. */
  .ch-tipi-scelte { border:0; padding:0; margin:0; min-width:0; display:grid; grid-template-columns:1fr; gap:8px 16px; }
  /* il riquadro ha anche la classe ch-campo: con le scritte sopra la regola .ch-modulo-etichette .ch-campo
     (flex in colonna) e quella delle sue etichette vengono dopo e vincerebbero, da qui la classe doppia */
  .ch-modulo-etichette .ch-campo.ch-tipi-scelte { display:grid; grid-template-columns:1fr 1fr; }
  .ch-modulo-etichette .ch-tipi-scelte .ch-tipo-scelta { font-size:.95em; font-weight:400; }
  .ch-tipi-scelte legend { padding:0; margin:0 0 8px; font-weight:600; grid-column:1 / -1; }
  .ch-tipo-scelta { display:flex; gap:8px; align-items:flex-start; cursor:pointer; font-size:.95em; }
  .ch-tipo-scelta input { margin-top:.2em; flex:none; }
  @media (max-width:600px) { .ch-modulo-etichette .ch-campo.ch-tipi-scelte { grid-template-columns:1fr; } }
  .ch-modulo-invio { grid-column:1; }
  .ch-modulo-invio .ch-btn { cursor:pointer; font:inherit; font-size:.85em; letter-spacing:.2em; text-transform:uppercase; }
  .ch-modulo-trappola { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
  /* 2.4.3 — SCRITTE SOPRA I CAMPI: menu e messaggio a tutta riga, nome ed
     email affiancati, consenso e pulsante sotto. Una colonna sul telefono. */
  .ch-modulo.ch-modulo-etichette { display:block; }
  .ch-modulo-etichette .ch-modulo-campi { display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; margin-bottom:16px; }
  .ch-modulo-etichette .ch-campo { display:flex; flex-direction:column; gap:7px; min-width:0; }
  .ch-modulo-etichette .ch-campo-pieno { grid-column:1 / -1; }
  .ch-modulo-etichette .ch-campo label { font-size:.86em; font-weight:600; }
  /* 2.7.3 — campo extra e messaggio stanno nello stesso contenitore, uno sotto l'altro: senza spazio
     l'etichetta del messaggio toccava il campo sopra (iluckystones, telefono). Dove il contenitore e'
     trasparente (display:contents, griglia del sito con il suo spazio) il margine non cambia nulla:
     misurato su Valenzoro, 22 px prima e dopo. */
  .ch-modulo-testo > .ch-campo + .ch-campo { margin-top:16px; }
  .ch-modulo-etichette textarea { min-height:110px; }
  .ch-modulo-etichette .ch-modulo-privacy { font-weight:400; margin:14px 0 18px; }
  @media (max-width:600px) { .ch-modulo-etichette .ch-modulo-campi { grid-template-columns:1fr; } }
  .ch-modulo-esito { padding:12px 16px; border-left:4px solid var(--ch-accento); background:rgba(0,0,0,.04); margin:0 0 16px; }
  .ch-modulo-esito-errore { border-left-color:#c0392b; }
  .ch-modulo-lato-testo { font-size:.95em; }
  @media (max-width: 760px) {
    .ch-modulo-blocco.ch-modulo-con-lato, .ch-modulo { grid-template-columns:1fr; }
    .ch-modulo-invio { grid-column:auto; }
  }
  .ch-widget-social { margin:16px 0; }
  .ch-widget-social a { color:var(--ch-primario); text-decoration:none; margin-right:14px; font-weight:600; }
  .ch-widget-ultimi-articoli { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; margin:18px 0; }
  .ch-widget-articolo-card { display:block; padding:14px; border:1px solid rgba(0,0,0,.08); border-radius:8px; text-decoration:none; color:inherit; }
  .ch-widget-articolo-card { padding:0; overflow:hidden; }
  .ch-widget-card-foto { display:block; aspect-ratio:16/10; background-size:cover; background-position:center; }
  .ch-widget-card-corpo { display:block; padding:14px 16px 18px; }
  .ch-widget-card-cat { display:block; font-style:normal; font-size:.78em; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ch-primario); margin:0 0 6px; font-family:var(--ch-font-interfaccia); }
  .ch-widget-articolo-card strong { display:block; margin-bottom:6px; color:var(--ch-secondario); }
  .ch-widget-articolo-card span { font-size:.9em; opacity:.8; }
  footer.ch-footer .ch-footer-legal { margin:0; display:flex; gap:18px; flex-wrap:wrap; }
  footer.ch-footer .ch-footer-legal a { text-decoration:none; }
  footer.ch-footer .ch-footer-legal a:hover { text-decoration:underline; }
  /* HERO. Lo slider esce dalla colonna di lettura e occupa tutta la larghezza
     della finestra: è l'elemento che dà il tono al sito, incorniciarlo dentro
     880px lo faceva sembrare una figura qualsiasi dentro un articolo. */
  .ch-slider { position:relative; overflow:hidden; margin:0 0 44px;
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
  /* L'hero apre la pagina, sopra al titolo: il template stampa <h1> prima del
     corpo, quindi lo slider arriverebbe dopo. Riordino in CSS (nessun
     rimaneggiamento del markup, che resta corretto anche senza fogli di stile). */
  main.ch-main { display:flex; flex-direction:column; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-slider:first-of-type { order:-1; margin-top:0; }
  /* Hero a filo con l'intestazione: il padding superiore della colonna di
     lettura lasciava una striscia vuota sopra l'immagine di apertura. */
  main.ch-main:has(> .ch-slider:first-of-type) { padding-top:0; }
  /* 2.1.7 — lo stesso per una fascia colorata o una sezione messa in apertura:
     deve toccare la testata, non staccarsene di una striscia bianca. */
  main.ch-main:has(> :is(.ch-fondo, .ch-sezione):first-child) { padding-top:0; }
  /* 2.4.3 — ANCORA DEL BLOCCO (#nome dal menu): l'involucro non aggiunge
     spazio; l'arrivo lascia libera l'altezza della testata. 2.6.7: l'altezza
     VERA (--ch-testata-ancora, come per tutte le ancore), non piu' 90px
     fissi: una testata su due righe ne superava i 90 e copriva il blocco. */
  main.ch-main > .ch-ancora-blocco { scroll-margin-top:calc(var(--ch-testata-ancora, 78px) + 12px); }
  main.ch-main:has(> .ch-ancora-blocco:first-child > .ch-sezione:first-child) { padding-top:0; }
  main.ch-main > .ch-sezione:first-child { margin-top:0; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > h1 { order:0; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > * { order:1; }
  :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .ch-slider:first-of-type + * { margin-top:0; }
  .ch-slider-track { display:flex; transition:transform .5s ease; }
  /* 2.2.4 — SLIDE SOVRAPPOSTE. Ogni slide entra con il suo effetto partendo
     trasparente; con il binario che scorreva di lato, durante lo scorrimento
     la slide in arrivo era ancora invisibile e si vedeva il fondo della
     pagina: un lampo bianco col solo riquadro del titolo, a ogni cambio.
     Ora le slide stanno una sopra l'altra: la nuova compare SOPRA quella che
     esce, che resta ferma sotto finche' non e' coperta — come negli slider
     da cui questi effetti sono presi. La classe la mette lo script: senza
     JavaScript resta la fila normale, con la prima slide in vista. La
     didascalia di chi esce si spegne subito, o le due parole si
     sovrapporrebbero nel pannello. */
  .ch-slider-sovrapposta .ch-slider-track { display:grid; transform:none !important; transition:none; }
  .ch-slider-sovrapposta .ch-slider-slide { grid-area:1 / 1; visibility:hidden; z-index:0; }
  .ch-slider-sovrapposta .ch-slider-slide.ch-uscente { visibility:visible; z-index:1; }
  .ch-slider-sovrapposta .ch-slider-slide.ch-uscente .ch-slider-caption { visibility:hidden; }
  .ch-slider-sovrapposta .ch-slider-slide.ch-attiva { visibility:visible; z-index:2; }
  /* Frecce e pallini sopra le slide: ora le slide hanno un livello proprio
     e, senza questo, coprirebbero i comandi (clic che non arriva). */
  .ch-slider-sovrapposta > .ch-slider-arrow,
  .ch-slider-sovrapposta > .ch-slider-dots { z-index:3; }
  /* `overflow:hidden` sulla singola slide, non solo sul carosello: gli
     effetti che escono dal bordo — la lama di luce, l'avvicinamento, le
     pagine che ruotano — altrimenti sconfinano nella slide accanto, che sta
     li' di fianco nella stessa fila e non e' nascosta, solo fuori vista. */
  .ch-slider-slide { flex:0 0 100%; min-height:clamp(360px, 62vh, 640px); background-size:cover; background-position:center; display:flex; align-items:flex-end; position:relative; overflow:hidden; }
  /* Velatura dal basso: le didascalie restano leggibili su qualunque foto,
     senza il rettangolo nero pieno che appiattiva l'immagine. */
  .ch-slider-slide::after { content:''; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.66) 24%, rgba(0,0,0,.30) 56%, rgba(0,0,0,0) 84%); }
  .ch-slider-caption { position:relative; z-index:2; color:#fff; padding:0 5vw 56px; width:100%;
    max-width:1180px; margin:0 auto; }
  /* La didascalia dello slider e' interfaccia, non corpo del testo: segue il
     font dell'interfaccia. Con un font titoli manoscritto, un titolo hero di
     tre righe in corsivo diventerebbe illeggibile sopra una fotografia. */
  main.ch-main .ch-slider .ch-slider-caption h2 { margin:0 0 10px; color:#fff; font-size:clamp(1.9em, 4.4vw, 3.1em);
    font-family: var(--ch-font-interfaccia);
    line-height:1.12; letter-spacing:-.02em; text-wrap:balance; text-shadow:0 2px 18px rgba(0,0,0,.35); }
  main.ch-main .ch-slider .ch-slider-caption p { margin:0; opacity:.94; font-size:clamp(1em, 1.5vw, 1.18em); max-width:56ch; }
  /* ── Slide a DUE fotografie ────────────────────────────────────────────
     La slide non porta uno sfondo suo: lo portano le due meta', affiancate.
     E' la composizione delle testate curate (un dettaglio accanto all'insieme)
     e la parola va AL CENTRO, sopra entrambe — non in basso a sinistra come
     nella slide singola, dove il testo accompagna una fotografia sola. */
  /* Niente altezza minima: l'altezza la danno le fotografie, come
     nell'originale. Imporla significherebbe ritagliare o deformare. */
  .ch-slider-slide.ch-slider-doppia { display:flex; align-items:stretch; padding:0; min-height:0; }
  /* Le due meta' mostrano l'immagine INTERA, nel suo rapporto naturale.
     Riempire il riquadro (`cover`) significa tagliare: su un primo piano non
     si nota, su una scena d'interni sparisce il pavimento e la composizione
     non torna piu'. In una slide a due, la seconda fotografia e' il contesto
     della prima, e un contesto tagliato non e' un contesto. */
  .ch-slider-slide.ch-slider-doppia .ch-slider-meta { flex:1 1 50%; min-width:0; }
  .ch-slider-slide.ch-slider-doppia .ch-slider-meta img {
    display:block; width:100%; height:auto; }
  /* Velatura piu' tenue e uniforme: qui il testo sta in mezzo, non in basso,
     e una sfumatura dal basso lo lascerebbe su fondo chiaro. */
  .ch-slider-slide.ch-slider-doppia::after {
    background:linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,.14) 38%, rgba(0,0,0,.14) 62%, rgba(0,0,0,.40) 100%); }
  .ch-slider-slide.ch-slider-doppia .ch-slider-caption {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; padding:0 3vw; }
  /* La parola al centro sta SOPRA le fotografie su un pannello velato, come
     nell'originale. Misure prese dal sito di partenza: pannello 283x141 in un
     modulo 707x442, testo 53px peso 400. Rapportate al testo — e non alla
     slide — restano vere a ogni misura: pannello largo 5,34 volte il corpo
     del carattere e alto 2,66 volte, cioe' 0,73em di aria sopra e sotto.
     Il colore e' quello letto sull'originale: rgba(47,72,88,.4).
     min-width, non width: una parola piu' lunga allarga il pannello invece
     di traboccarne. La velatura basta a staccare il testo, quindi qui
     l'ombra si alleggerisce: due veli sommati sporcano le fotografie. */
  main.ch-main .ch-slider .ch-slider-doppia .ch-slider-caption h2 {
    margin:0; letter-spacing:0; font-weight:400;
    /* 7,5vw e' il rapporto misurato (53px su 707); il tetto riproduce il
       punto in cui l'originale smette di ingrandire il testo. */
    font-size:clamp(1.5rem, 7.5vw, 5.8rem);
    min-width:5.34em; box-sizing:border-box;
    padding:.73em .6em; background:rgba(47,72,88,.4);
    text-shadow:0 2px 18px rgba(0,0,0,.28); }
  /* NIENTE impilamento sullo stretto. Lo avevo messo per non ridurre le
     fotografie a francobolli, ma l'originale — misurato a 375 px — le tiene
     affiancate, 188x250 ciascuna: il gioco della slide sta proprio nel
     vederle INSIEME, e impilarle lo disfa. La parola al centro rimpicciolisce
     con la slide, cosi' resta leggibile senza coprire le immagini. */
  @media (max-width: 700px) {
    main.ch-main .ch-slider .ch-slider-doppia .ch-slider-caption h2 {
      font-size:clamp(1.1rem, 7.5vw, 2.4rem); padding:.6em .5em; }
  }
  /* ── EFFETTI D'INGRESSO DELLE SLIDE ────────────────────────────────────
     Il carosello scorre in orizzontale; l'effetto e' quello che accade
     DENTRO la slide quando arriva il suo turno. Lo script mette
     `ch-attiva` sulla slide in scena e lo toglie alle altre: da li' in poi
     decide il foglio di stile, senza una riga di JavaScript per animare.

     PERCHE' ANIMAZIONI E NON TRANSIZIONI: un'animazione riparte da capo ogni
     volta che la classe torna, anche se la slide era gia' stata vista. Con le
     transizioni il secondo giro del carosello sarebbe rimasto immobile.

     Chi ha chiesto al sistema di ridurre il movimento non lo riceve: le
     slide compaiono e basta. Non e' una preferenza estetica — per chi
     soffre di disturbi vestibolari un movimento ampio e' un malessere. */
  @media (prefers-reduced-motion: no-preference) {

    /* dissolvenza — la forma neutra: comparsa dolce, niente spostamenti. */
    .ch-slider[data-ch-effetto="dissolvenza"] .ch-attiva .ch-slider-meta,
    .ch-slider[data-ch-effetto="dissolvenza"] .ch-attiva .ch-slider-caption {
      animation: chComparsa 900ms cubic-bezier(.77,0,.175,1) both; }

    /* verticale-opposta — le due meta' entrano in direzioni CONTRARIE.
       Misurata sull'originale che il modulo doveva saper riprodurre: la
       meta' di sinistra parte 50px piu' in alto, quella di destra 50px piu'
       in basso, 1200 ms con la stessa curva. La tensione fra le due e'
       l'effetto: se andassero nello stesso verso sarebbe una scivolata. */
    .ch-slider[data-ch-effetto="verticale-opposta"] .ch-attiva .ch-slider-meta:nth-child(1) {
      animation: chSaleDaSopra 1200ms cubic-bezier(.77,0,.175,1) both; }
    .ch-slider[data-ch-effetto="verticale-opposta"] .ch-attiva .ch-slider-meta:nth-child(2) {
      animation: chSaleDaSotto 1200ms cubic-bezier(.77,0,.175,1) both; }
    /* Slide a fotografia singola: nessuna "seconda meta'" da contrapporre,
       si usa la comparsa dolce per non lasciarla ferma. */
    .ch-slider[data-ch-effetto="verticale-opposta"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chComparsa 900ms cubic-bezier(.77,0,.175,1) both; }

    /* salita — tutto sale insieme di poco: sobrio, adatto a un istituzionale. */
    .ch-slider[data-ch-effetto="salita"] .ch-attiva .ch-slider-meta,
    .ch-slider[data-ch-effetto="salita"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chSaleDaSotto 1000ms cubic-bezier(.77,0,.175,1) both; }

    /* avvicinamento — la fotografia si allarga appena mentre compare. */
    .ch-slider[data-ch-effetto="avvicinamento"] .ch-attiva .ch-slider-meta,
    .ch-slider[data-ch-effetto="avvicinamento"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chAvvicina 1400ms cubic-bezier(.22,.61,.36,1) both; }

    /* tenda — le meta' si aprono dai lati, come un sipario che si chiude
       all'incontrario. Su slide singola diventa una comparsa. */
    .ch-slider[data-ch-effetto="tenda"] .ch-attiva .ch-slider-meta:nth-child(1) {
      animation: chDaSinistra 1100ms cubic-bezier(.77,0,.175,1) both; }
    .ch-slider[data-ch-effetto="tenda"] .ch-attiva .ch-slider-meta:nth-child(2) {
      animation: chDaDestra 1100ms cubic-bezier(.77,0,.175,1) both; }
    .ch-slider[data-ch-effetto="tenda"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chComparsa 900ms ease both; }

    /* scorrimento-lento — la fotografia continua a muoversi per tutta la
       permanenza della slide: e' il movimento che tiene viva un'immagine
       ferma. Dura a lungo di proposito, non deve farsi notare. */
    .ch-slider[data-ch-effetto="scorrimento-lento"] .ch-attiva .ch-slider-meta img,
    .ch-slider[data-ch-effetto="scorrimento-lento"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chDeriva 9000ms linear both; }

    /* cinema — un avvicinamento LUNGO, che dura quanto la slide invece di
       esaurirsi all'ingresso. E' il movimento delle aperture cinematografiche:
       non si vede accadere, si sente che l'immagine e' viva. Sotto, la
       velatura ai bordi porta l'occhio al centro, dove sta il titolo. */
    .ch-slider[data-ch-effetto="cinema"] .ch-attiva .ch-slider-meta,
    .ch-slider[data-ch-effetto="cinema"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chCinema 11000ms cubic-bezier(.16,.62,.31,1) both; }

    /* diagonale — le meta' arrivano in obliquo e in verso contrario, con un
       filo di rotazione. E' la versione tesa della verticale opposta: dove
       quella e' composta, questa e' irrequieta. Adatta a moda e sport. */
    .ch-slider[data-ch-effetto="diagonale"] .ch-attiva .ch-slider-meta:nth-child(1) {
      animation: chDiagonaleA 1150ms cubic-bezier(.77,0,.175,1) both; }
    .ch-slider[data-ch-effetto="diagonale"] .ch-attiva .ch-slider-meta:nth-child(2) {
      animation: chDiagonaleB 1150ms cubic-bezier(.77,0,.175,1) both; }
    .ch-slider[data-ch-effetto="diagonale"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chDiagonaleA 1150ms cubic-bezier(.77,0,.175,1) both; }

    /* raggi — una lama di luce attraversa l'immagine una volta sola, in
       diagonale. Fa sembrare la fotografia illuminata invece che stampata.
       Passa e se ne va: se tornasse a ripetizione diventerebbe un'insegna. */
    .ch-slider[data-ch-effetto="raggi"] .ch-attiva .ch-slider-meta,
    .ch-slider[data-ch-effetto="raggi"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chComparsa 900ms ease both; }
    .ch-slider[data-ch-effetto="raggi"] .ch-attiva::before {
      content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
      background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 47%,
                 rgba(255,255,255,.62) 50%, rgba(255,255,255,.42) 53%, transparent 62%);
      animation: chLama 2200ms 400ms cubic-bezier(.4,0,.2,1) both; }

    /* sfoglia — le due meta' ruotano su un asse verticale, come due pagine
       che si aprono verso chi guarda. La prospettiva sta sulla slide: senza,
       la rotazione appare piatta e sembra uno schiacciamento. */
    .ch-slider[data-ch-effetto="sfoglia"] .ch-attiva { perspective:1400px; }
    .ch-slider[data-ch-effetto="sfoglia"] .ch-attiva .ch-slider-meta:nth-child(1) {
      transform-origin:left center;
      animation: chSfogliaSx 1250ms cubic-bezier(.34,.9,.28,1) both; }
    .ch-slider[data-ch-effetto="sfoglia"] .ch-attiva .ch-slider-meta:nth-child(2) {
      transform-origin:right center;
      animation: chSfogliaDx 1250ms cubic-bezier(.34,.9,.28,1) both; }
    .ch-slider[data-ch-effetto="sfoglia"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chAvvicina 1200ms ease both; }

    /* ── SELEZIONE ISPIRATA AGLI SLIDER PIU' DIFFUSI (2026) ────────────────
       Sei ingressi in piu', scelti perche' dicono cose diverse: una
       rivelazione teatrale, una messa a fuoco fotografica, uno scorrimento
       netto, un'inclinazione nervosa, una ribalta materica, un avanzamento
       dal fondo. Tutti CSS puri, tutti dentro la guardia sul movimento
       ridotto, tutti con la doppia immagine gestita e la misura che si
       accorcia sugli schermi piccoli. Nessuno introduce JavaScript. */

    /* rivelazione — una fenditura verticale si apre dal centro e scopre la
       fotografia, come un sipario che parte dal mezzo. La feritoia della
       didascalia resta indipendente: qui si scopre l'immagine, non il testo. */
    .ch-slider[data-ch-effetto="rivelazione"] .ch-attiva .ch-slider-meta,
    .ch-slider[data-ch-effetto="rivelazione"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chRivela 1150ms cubic-bezier(.77,0,.175,1) both; }

    /* messa-a-fuoco — l'immagine entra sfocata e si fa nitida, come una
       reflex che aggancia il soggetto. Regala un istante di attesa prima che
       la scena si legga: e' quell'attesa a renderla elegante. */
    .ch-slider[data-ch-effetto="messa-a-fuoco"] .ch-attiva .ch-slider-meta,
    .ch-slider[data-ch-effetto="messa-a-fuoco"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chFuoco 1250ms cubic-bezier(.22,.61,.36,1) both; }

    /* scorrimento-laterale — la fotografia entra da destra e si posa. E'
       l'ingresso piu' diretto e il piu' riconoscibile: dice "nuova scena"
       senza giri di parole. Adatto a portfolio e cataloghi. */
    .ch-slider[data-ch-effetto="scorrimento-laterale"] .ch-attiva .ch-slider-meta,
    .ch-slider[data-ch-effetto="scorrimento-laterale"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chScorriLat 1050ms cubic-bezier(.77,0,.175,1) both; }

    /* inclinazione — entra sghemba e si raddrizza. Il filo di skew da' scatto
       e velocita': e' l'ingresso di moda, sport, automotive. La doppia
       immagine inclina le due meta' nello stesso verso, cosi' restano parallele. */
    .ch-slider[data-ch-effetto="inclinazione"] .ch-attiva .ch-slider-meta,
    .ch-slider[data-ch-effetto="inclinazione"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chInclina 1100ms cubic-bezier(.34,.9,.28,1) both; }

    /* ribalta — la fotografia si ribalta in avanti da un cardine in alto,
       come una scheda che cade verso chi guarda. La prospettiva sta sulla
       slide: senza, la rotazione appare schiacciata. */
    .ch-slider[data-ch-effetto="ribalta"] .ch-attiva { perspective:1500px; }
    .ch-slider[data-ch-effetto="ribalta"] .ch-attiva .ch-slider-meta,
    .ch-slider[data-ch-effetto="ribalta"] .ch-attiva:not(.ch-slider-doppia) {
      transform-origin:center top;
      animation: chRibalta 1200ms cubic-bezier(.34,.9,.28,1) both; }

    /* profondita — l'immagine parte piccola e avanza fino al suo posto: il
       contrario dell'avvicinamento, che invece parte grande. Da' la
       sensazione che la scena si faccia avanti verso il visitatore. */
    .ch-slider[data-ch-effetto="profondita"] .ch-attiva .ch-slider-meta,
    .ch-slider[data-ch-effetto="profondita"] .ch-attiva:not(.ch-slider-doppia) {
      animation: chProfondita 1150ms cubic-bezier(.16,.62,.31,1) both; }

    /* isometrico — il pannello arriva inclinato in prospettiva isometrica e si
       posa in piano, come una lastra che cade al suo posto. La prospettiva sta
       sulla slide: senza, l'inclinazione appare piatta. Adatto ad arredamento,
       architettura, prodotto. */
    .ch-slider[data-ch-effetto="isometrico"] .ch-attiva { perspective:1600px; }
    .ch-slider[data-ch-effetto="isometrico"] .ch-attiva .ch-slider-meta,
    .ch-slider[data-ch-effetto="isometrico"] .ch-attiva:not(.ch-slider-doppia) {
      transform-origin:center center;
      animation: chIsometrico 1300ms cubic-bezier(.34,.9,.28,1) both; }

    /* IL TESTO, in ogni effetto, arriva DOPO le fotografie e sale da dietro
       la feritoia. I 500 ms di attesa sono quelli dell'originale: prima si
       vede l'immagine, poi la parola la commenta. Un testo che parte insieme
       all'immagine sembra una didascalia; questo sembra un titolo. */
    .ch-slider .ch-attiva .ch-slider-caption h2 {
      animation: chComparsa 300ms ease both; }
    .ch-slider .ch-attiva .ch-slider-caption .ch-slider-riga {
      animation: chSaleDalNero 1300ms 500ms cubic-bezier(.77,0,.175,1) both; }
    .ch-slider .ch-attiva .ch-slider-caption p {
      animation: chComparsa 900ms 700ms ease both; }
  }

  /* La feritoia c'e' sempre, anche senza animazione: e' lei a tenere la
     parola dentro il pannello. */
  .ch-slider-caption .ch-slider-feritoia { display:block; overflow:hidden; }
  /* 2.4.3 — occhiello sopra il titolo e parte del titolo in evidenza. */
  main.ch-main .ch-slider .ch-slider-caption .ch-slider-occhiello { margin:0 0 14px; font-family:var(--ch-font-interfaccia);
    font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ch-accento); opacity:1; }
  .ch-slider-caption h2 em { font-style:italic; color:var(--ch-accento); }
  .ch-slider-caption .ch-slider-riga { display:block; }

  /* La velatura ai bordi dell'effetto cinema NON sta dentro il blocco che
     rispetta la preferenza sul movimento: e' un modo di colorare, non un
     movimento, e chi ha chiesto meno animazioni non ha chiesto meno stile. */
  .ch-slider[data-ch-effetto="cinema"] .ch-slider-slide::after {
    background:radial-gradient(ellipse at center, rgba(0,0,0,.10) 0%, rgba(0,0,0,.22) 52%, rgba(0,0,0,.66) 100%); }

  @keyframes chComparsa      { from { opacity:0; } to { opacity:1; } }
  @keyframes chCinema        { from { opacity:0; transform:scale(1.14); } 12% { opacity:1; } to { opacity:1; transform:scale(1.0); } }
  @keyframes chDiagonaleA    { from { opacity:0; transform:translate(-40px, -40px) rotate(-1.2deg); } to { opacity:1; transform:none; } }
  @keyframes chDiagonaleB    { from { opacity:0; transform:translate(40px, 40px) rotate(1.2deg); }   to { opacity:1; transform:none; } }
  @keyframes chLama          { from { transform:translateX(-120%); opacity:0; } 18% { opacity:1; } to { transform:translateX(120%); opacity:0; } }
  @keyframes chSfogliaSx     { from { opacity:0; transform:rotateY(52deg); }  to { opacity:1; transform:none; } }
  @keyframes chSfogliaDx     { from { opacity:0; transform:rotateY(-52deg); } to { opacity:1; transform:none; } }
  @keyframes chSaleDaSopra   { from { opacity:0; transform:translateY(-50px); } to { opacity:1; transform:none; } }
  @keyframes chSaleDaSotto   { from { opacity:0; transform:translateY(50px); }  to { opacity:1; transform:none; } }
  @keyframes chDaSinistra    { from { opacity:0; transform:translateX(-60px); } to { opacity:1; transform:none; } }
  @keyframes chDaDestra      { from { opacity:0; transform:translateX(60px); }  to { opacity:1; transform:none; } }
  @keyframes chAvvicina      { from { opacity:0; transform:scale(1.08); }       to { opacity:1; transform:none; } }
  @keyframes chDeriva        { from { transform:scale(1.02) translateY(0); }    to { transform:scale(1.10) translateY(-2%); } }
  @keyframes chSaleDalNero   { from { transform:translateY(100%); }             to { transform:none; } }
  @keyframes chRivela        { from { clip-path:inset(0 50% 0 50%); opacity:.35; } to { clip-path:inset(0 0 0 0); opacity:1; } }
  @keyframes chFuoco         { from { filter:blur(20px); opacity:0; transform:scale(1.05); } to { filter:blur(0); opacity:1; transform:none; } }
  @keyframes chScorriLat     { from { opacity:0; transform:translateX(80px); }  to { opacity:1; transform:none; } }
  @keyframes chInclina       { from { opacity:0; transform:skewX(-8deg) translateX(44px); } to { opacity:1; transform:none; } }
  @keyframes chRibalta       { from { opacity:0; transform:rotateX(42deg); }     to { opacity:1; transform:none; } }
  @keyframes chProfondita    { from { opacity:0; transform:scale(.85); }         to { opacity:1; transform:none; } }
  @keyframes chIsometrico    { from { opacity:0; transform:rotateX(34deg) rotateY(-22deg) scale(.9); } to { opacity:1; transform:none; } }

  /* ── ADATTAMENTO ALLO SCHERMO ────────────────────────────────────────
     Gli spostamenti sono misure assolute: 50px su un monitor sono un
     accenno, sullo schermo di un telefono sono un salto. Si accorciano per
     gradi, come fa il sito originale che il modulo doveva riprodurre — che
     scala i suoi valori su quattro soglie invece di tenerne uno solo.

     Non e' solo eleganza: un movimento troppo ampio su schermo piccolo fa
     uscire l'immagine dal riquadro per una frazione di secondo, e si vede
     il bordo vuoto. */
  @media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
    @keyframes chSaleDaSopra { from { opacity:0; transform:translateY(-46px); } to { opacity:1; transform:none; } }
    @keyframes chSaleDaSotto { from { opacity:0; transform:translateY(46px); }  to { opacity:1; transform:none; } }
    @keyframes chDiagonaleA  { from { opacity:0; transform:translate(-30px, -30px) rotate(-.9deg); } to { opacity:1; transform:none; } }
    @keyframes chDiagonaleB  { from { opacity:0; transform:translate(30px, 30px) rotate(.9deg); }   to { opacity:1; transform:none; } }
    @keyframes chScorriLat   { from { opacity:0; transform:translateX(58px); }  to { opacity:1; transform:none; } }
    @keyframes chInclina     { from { opacity:0; transform:skewX(-6deg) translateX(32px); } to { opacity:1; transform:none; } }
  }
  @media (max-width: 780px) and (prefers-reduced-motion: no-preference) {
    @keyframes chSaleDaSopra { from { opacity:0; transform:translateY(-24px); } to { opacity:1; transform:none; } }
    @keyframes chSaleDaSotto { from { opacity:0; transform:translateY(24px); }  to { opacity:1; transform:none; } }
    @keyframes chDiagonaleA  { from { opacity:0; transform:translate(-16px, -16px); } to { opacity:1; transform:none; } }
    @keyframes chDiagonaleB  { from { opacity:0; transform:translate(16px, 16px); }   to { opacity:1; transform:none; } }
    @keyframes chDaSinistra  { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:none; } }
    @keyframes chDaDestra    { from { opacity:0; transform:translateX(28px); }  to { opacity:1; transform:none; } }
    /* La rotazione in prospettiva costa cara sui telefoni piu' modesti e a
       questa misura non si apprezza: diventa una comparsa con un accenno di
       avvicinamento, che dice la stessa cosa senza far faticare nessuno. */
    @keyframes chSfogliaSx   { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:none; } }
    @keyframes chSfogliaDx   { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:none; } }
    /* L'avvicinamento lungo si accorcia: undici secondi di movimento
       continuo su un telefono sono batteria spesa per un effetto che si
       nota appena. */
    @keyframes chCinema      { from { opacity:0; transform:scale(1.07); } 14% { opacity:1; } to { opacity:1; transform:none; } }
    @keyframes chScorriLat   { from { opacity:0; transform:translateX(34px); }  to { opacity:1; transform:none; } }
    @keyframes chInclina     { from { opacity:0; transform:skewX(-4deg) translateX(20px); } to { opacity:1; transform:none; } }
    /* La sfocatura ampia costa cara in ridisegno sui telefoni modesti: si
       riduce a un velo che si dissolve, stesso senso, meno fatica. */
    @keyframes chFuoco       { from { filter:blur(9px); opacity:0; transform:scale(1.03); } to { filter:blur(0); opacity:1; transform:none; } }
    /* La ribalta in prospettiva, come la sfogliata, a questa misura non si
       apprezza: diventa un avanzamento dal fondo. */
    @keyframes chRibalta     { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:none; } }
    /* L'isometrico, come la ribalta, a questa misura si semplifica in un
       avanzamento con un filo di inclinazione. */
    @keyframes chIsometrico  { from { opacity:0; transform:rotateY(-12deg) scale(.94); } to { opacity:1; transform:none; } }
  }
  @media (max-width: 480px) and (prefers-reduced-motion: no-preference) {
    @keyframes chSaleDaSopra { from { opacity:0; transform:translateY(-19px); } to { opacity:1; transform:none; } }
    @keyframes chSaleDaSotto { from { opacity:0; transform:translateY(19px); }  to { opacity:1; transform:none; } }
    /* La lama di luce sparisce: su questa misura attraversa lo schermo in
       un lampo e sembra un difetto di visualizzazione, non un riflesso. */
    .ch-slider[data-ch-effetto="raggi"] .ch-attiva::before { display:none; }
  }

  /* ── SLIDE CON VIDEO DI SFONDO ──────────────────────────────────────── */
  /* L'immagine resta come sfondo del riquadro: e' il manifesto, quello che si
     vede prima che il video parta e quello che resta se non parte affatto. */
  .ch-slider-slide.ch-slider-video { align-items:center; }
  .ch-slider-video .ch-slider-filmato,
  .ch-slider-video .ch-slider-filmato-terzi iframe {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;
    z-index:0; pointer-events:none; }
  /* Il lettore di terze parti ha proporzioni sue e non si lascia ritagliare
     come un <video>: lo si ingrandisce oltre il riquadro e lo si centra, cosi'
     riempie sempre senza bande nere. E' il prezzo di non ospitare il file. */
  .ch-slider-video .ch-slider-filmato-terzi iframe {
    width:177.78vh; min-width:100%; height:56.25vw; min-height:100%;
    left:50%; top:50%; transform:translate(-50%, -50%); inset:auto; }
  .ch-slider-video .ch-slider-caption { z-index:2; text-align:center; }
  /* Il pulsante compare solo quando il video di terzi non e' stato caricato:
     chi lo preme chiede quel video, e quel gesto vale per quel caricamento. */
  .ch-slider-video .ch-slider-chiedi {
    position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3;
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.35);
    border-radius:999px; padding:9px 18px; font-size:.86em; cursor:pointer;
    font-family:var(--ch-font-interfaccia); }
  .ch-slider-video .ch-slider-chiedi:hover { background:rgba(0,0,0,.75); }

  /* 2.2.1 — pallini: il punto resta di 10 px, l'area da toccare e' di
     24 (sotto quella misura il dito sbaglia pallino). */
  .ch-slider-dots { position:absolute; left:0; right:0; bottom:7px; display:flex; justify-content:center; gap:0; }
  .ch-slider-dots button { width:24px; height:24px; border:0; background:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .ch-slider-dots button::before { content:''; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.55); }
  .ch-slider-dots button.ch-attivo { width:34px; }
  .ch-slider-dots button.ch-attivo::before { width:26px; border-radius:5px; background:#fff; }
  .ch-slider-arrow { position:absolute; top:50%; transform:translateY(-50%); border:0; background:rgba(0,0,0,.35); color:#fff; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:18px; line-height:1; }
  .ch-slider-arrow.ch-prev { left:14px; }
  .ch-slider-arrow.ch-next { right:14px; }
  #ch-cookie-banner { position:fixed; left:0; right:0; bottom:0; z-index:9999; background:var(--ch-sfondo); color:var(--ch-testo); border-top:1px solid rgba(0,0,0,.12); box-shadow:0 -4px 18px rgba(0,0,0,.12); padding:18px 5vw; font-size:.92em; }
  #ch-cookie-banner p { margin:0 0 12px; max-width:900px; }
  #ch-cookie-banner .ch-cookie-azioni { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
  #ch-cookie-banner button { border:0; border-radius:5px; padding:9px 18px; cursor:pointer; font-size:.95em; }
  #ch-cookie-banner .ch-cookie-accetta { background:var(--ch-accento); color:#fff; }
  #ch-cookie-banner .ch-cookie-rifiuta, #ch-cookie-banner .ch-cookie-personalizza { background:transparent; border:1px solid rgba(0,0,0,.2); color:var(--ch-testo); }
  #ch-cookie-banner .ch-cookie-salva { background:var(--ch-primario); color:#fff; }
  #ch-cookie-pannello { display:none; margin-top:14px; border-top:1px solid rgba(0,0,0,.08); padding-top:14px; }
  #ch-cookie-pannello.ch-aperto { display:block; }
  #ch-cookie-pannello .ch-cookie-cat { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
  #ch-cookie-pannello .ch-cookie-cat strong { display:block; }
  #ch-cookie-pannello .ch-cookie-cat p { margin:2px 0 0; font-size:.9em; opacity:.8; }
  .ch-cookie-riapri { cursor:pointer; }

  /* IL CONTENITORE DELL'EFFETTO DI COMPARSA E' TRASPARENTE PER L'IMPAGINAZIONE
     (corretto nella 2.1.5). Un blocco con «comparsa allo scorrimento» viene
     avvolto in un div .ch-comparsa: tutte le regole scritte come
     «main.ch-main > .blocco» non lo vedevano piu', e il blocco perdeva
     l'impaginazione — colonne impilate, sezioni non a tutta larghezza. Visto
     su un sito pubblicato. Ora ogni regola accetta il blocco sia figlio
     diretto del corpo pagina, sia figlio del contenitore di comparsa:
     :is(main.ch-main, main.ch-main > :is(.ch-comparsa, .ch-solo-desktop, .ch-solo-mobile, .ch-fondo, .ch-ancora-blocco)) > .blocco. */
  /* ═══ COMPOSIZIONE DELLA TESTATA E DEL FOOTER (2.1.5) ══════════════════
     Stanno IN FONDO al foglio di proposito: devono vincere sulle regole dei
     layout (classico/moderno/minimal) e su quella della testata fissa, che
     hanno la stessa specificita'. Le classi arrivano dal tema del sito, gia'
     scelte fra forme note: nessun valore libero entra qui. */

  /* Ordine dei pezzi nella riga: marchio, lingue, menu, azioni (pulsante e
     hamburger). Prima l'hamburger stava fra le lingue e il menu; ora vive con
     il pulsante d'azione in un contenitore suo, che chiude la riga. */
  header.ch-header .ch-brand { order:1; }
  header.ch-header .ch-lingue { order:2; }
  header.ch-header nav { order:3; }
  header.ch-header .ch-header-azioni { order:4; display:flex; align-items:center; gap:14px; }
  header.ch-header .ch-header-cta { font-family:var(--ch-font-interfaccia); background:var(--ch-accento); color:#fff;
    padding:9px 18px; border-radius:5px; font-weight:600; font-size:.92em; line-height:1.3; text-decoration:none; white-space:nowrap; }
  header.ch-header .ch-header-cta:hover { color:#fff; filter:brightness(1.08); text-decoration:none; }
  @media (max-width: 560px) { header.ch-header .ch-header-cta { display:none; } }

  /* SOTTOMENU A TENDINA (corretto nella 2.1.5). Con il menu in linea le voci
     figlie erano SEMPRE aperte sotto la testata: nessuna regola le
     nascondeva. Ora compaiono al passaggio del puntatore o quando una voce
     dentro riceve il fuoco (tastiera). Nel menu a panino e sullo schermo
     stretto restano in vista, perche' li' la tendina e' gia' aperta. */
  header.ch-header nav li { position:relative; }
  header.ch-header nav ul ul { display:none; left:0; top:100%; min-width:180px; z-index:31; }
  header.ch-header nav li:hover > ul, header.ch-header nav li:focus-within > ul, header.ch-header nav li.ch-aperto > ul { display:block; }
  body.ch-header-hamburger header.ch-header nav ul ul { display:block; }
  @media (max-width: 780px) { header.ch-header nav ul ul { display:block; } }

  /* Testata libera: non resta in cima scorrendo (il predefinito e' fissa). */
  body.ch-header-libera header.ch-header { position:static; backdrop-filter:none; background:var(--ch-sfondo); }

  /* 2.5.0 — TESTATA TRASPARENTE SOPRA L'APERTURA. Resta in cima, ma finche'
     la pagina e' all'inizio si appoggia sulla prima fascia (trasparente, testi
     chiari); scorrendo prende il suo fondo e si raccoglie (marchio piu'
     piccolo, e con il marchio al centro tutto su una riga). Se la pagina non
     apre con una fascia (una pagina di testo, l'informativa) lo script la
     mette subito piena e sposta il contenuto sotto: niente testo coperto. */
  body.ch-header-trasparente header.ch-header { position:fixed; top:0; left:0; right:0; z-index:30;
    transition:background-color .45s ease, box-shadow .45s ease, padding .45s ease; }
  body.ch-header-trasparente:not(.ch-scorso):not(.ch-header-pieno) header.ch-header { background:transparent; box-shadow:none; backdrop-filter:none; }
  body.ch-header-trasparente:not(.ch-scorso):not(.ch-header-pieno) header.ch-header :is(.ch-brand, nav > ul > li > a, .ch-lingue a, .ch-hamburger) { color:#fff; }
  body.ch-header-trasparente.ch-header-pieno main.ch-main { padding-top:var(--ch-testata-altezza, 84px); }
  body.ch-header-trasparente header.ch-header .ch-brand img { transition:max-height .45s ease; }
  body.ch-header-trasparente.ch-scorso header.ch-header { padding-top:10px; padding-bottom:10px; box-shadow:0 1px 0 rgba(255,255,255,.08), 0 8px 24px -16px rgba(0,0,0,.45); }
  body.ch-header-trasparente.ch-scorso header.ch-header .ch-brand img { max-height:40px; }
  @media (min-width: 781px) {
    body.ch-header-trasparente.ch-header-marchio-centro.ch-scorso:not(.ch-header-hamburger) header.ch-header {
      grid-template-columns:auto 1fr auto auto; grid-template-areas:"brand nav lingue azioni"; row-gap:0; column-gap:28px; }
    body.ch-header-trasparente.ch-header-marchio-centro.ch-scorso:not(.ch-header-hamburger) header.ch-header .ch-brand { justify-self:start; }
    body.ch-header-trasparente.ch-header-marchio-centro.ch-scorso:not(.ch-header-hamburger) header.ch-header nav { justify-self:end; }
    body.ch-header-trasparente.ch-header-marchio-centro.ch-scorso:not(.ch-header-hamburger) header.ch-header .ch-lingue { justify-self:end; }
  }
  @media (prefers-reduced-motion: reduce) {
    body.ch-header-trasparente header.ch-header, body.ch-header-trasparente header.ch-header .ch-brand img { transition:none; }
  }

  /* Marchio a sinistra, menu al centro, lingue e azioni a destra. Solo dove
     il menu e' in linea: con l'hamburger sempre il centro sarebbe vuoto. */
  @media (min-width: 781px) {
    body.ch-header-menu-centro:not(.ch-header-hamburger) header.ch-header nav { flex:1; display:flex; justify-content:center; }
    body.ch-header-menu-centro:not(.ch-header-hamburger) header.ch-header .ch-lingue { order:3; margin-left:0; }
    body.ch-header-menu-centro:not(.ch-header-hamburger) header.ch-header nav { order:2; }
  }

  /* Marchio centrato: prima riga con lingue a sinistra, marchio al centro e
     azioni a destra; menu centrato nella riga sotto. Con l'hamburger sempre
     la seconda riga non c'e' (il menu scende a tendina come al solito). */
  @media (min-width: 781px) {
    body.ch-header-marchio-centro header.ch-header {
      display:grid; grid-template-columns:1fr auto 1fr; grid-template-areas:"lingue brand azioni" "nav nav nav";
      align-items:center; justify-items:center; row-gap:12px; }
    body.ch-header-marchio-centro header.ch-header .ch-brand { grid-area:brand; }
    body.ch-header-marchio-centro header.ch-header .ch-lingue { grid-area:lingue; justify-self:start; margin:0; }
    body.ch-header-marchio-centro header.ch-header .ch-header-azioni { grid-area:azioni; justify-self:end; }
    body.ch-header-marchio-centro:not(.ch-header-hamburger) header.ch-header nav { grid-area:nav; }
    body.ch-header-marchio-centro.ch-header-hamburger header.ch-header { grid-template-areas:"lingue brand azioni"; }
  }

  /* Fondo della testata: scuro o colore primario, con testi chiari. Le
     tendine (sottomenu, menu a panino) restano leggibili sullo stesso fondo. */
  body.ch-header-scuro header.ch-header { background:color-mix(in srgb, var(--ch-testo) 94%, #000 6%); }
  body.ch-header-primario header.ch-header { background:var(--ch-primario); }
  body.ch-header-scuro header.ch-header .ch-brand, body.ch-header-primario header.ch-header .ch-brand,
  body.ch-header-scuro header.ch-header nav a, body.ch-header-primario header.ch-header nav a,
  body.ch-header-scuro header.ch-header .ch-lingue a, body.ch-header-primario header.ch-header .ch-lingue a,
  body.ch-header-scuro header.ch-header .ch-hamburger, body.ch-header-primario header.ch-header .ch-hamburger { color:#fff; }
  body.ch-header-scuro header.ch-header nav a:hover, body.ch-header-primario header.ch-header nav a:hover { color:#fff; opacity:.8; }
  body.ch-header-scuro header.ch-header .ch-lingue .ch-lingua-attuale span,
  body.ch-header-primario header.ch-header .ch-lingue .ch-lingua-attuale span { color:#fff; opacity:.6; }
  body.ch-header-scuro.ch-header-hamburger .ch-hamburger, body.ch-header-primario.ch-header-hamburger .ch-hamburger {
    background:transparent; border-color:rgba(255,255,255,.4); }
  body.ch-header-scuro header.ch-header nav ul ul, body.ch-header-scuro.ch-header-hamburger header.ch-header nav {
    background:color-mix(in srgb, var(--ch-testo) 94%, #000 6%); border-color:rgba(255,255,255,.12); }
  body.ch-header-primario header.ch-header nav ul ul, body.ch-header-primario.ch-header-hamburger header.ch-header nav {
    background:var(--ch-primario); border-color:rgba(255,255,255,.2); }
  body.ch-header-primario header.ch-header .ch-header-cta { background:#fff; color:var(--ch-primario); }
  body.ch-header-primario header.ch-header .ch-header-cta:hover { color:var(--ch-primario); }
  @media (max-width: 780px) {
    body.ch-header-scuro header.ch-header nav { background:color-mix(in srgb, var(--ch-testo) 94%, #000 6%); border-top-color:rgba(255,255,255,.12); }
    body.ch-header-primario header.ch-header nav { background:var(--ch-primario); border-top-color:rgba(255,255,255,.2); }
  }

  /* Footer chiaro: stesso disegno, fondo appena piu' scuro della pagina e
     testi nel colore del tema. */
  footer.ch-footer.ch-footer-chiaro { background:color-mix(in srgb, var(--ch-sfondo) 96%, #000 4%); color:var(--ch-testo); border-top:1px solid rgba(0,0,0,.08); }
  footer.ch-footer.ch-footer-chiaro a { color:var(--ch-testo); }
  footer.ch-footer.ch-footer-chiaro a:hover { color:var(--ch-primario); }
  footer.ch-footer.ch-footer-chiaro h4, footer.ch-footer.ch-footer-chiaro .ch-footer-marchio { color:var(--ch-testo); }
  footer.ch-footer.ch-footer-chiaro .ch-footer-basso { border-top-color:rgba(0,0,0,.1); }
  footer.ch-footer.ch-footer-chiaro .ch-pallino-lingua { border-color:rgba(0,0,0,.25); color:var(--ch-testo); }
  footer.ch-footer.ch-footer-chiaro a.ch-pallino-lingua:hover { background:var(--ch-testo); color:#fff; border-color:var(--ch-testo); }
  footer.ch-footer.ch-footer-chiaro .ch-footer-cta { color:#fff; }
  /* Il numero di colonne del footer ora dipende da cio' che c'e' davvero:
     il PHP lo scrive come variabile, la griglia lo segue. */
  footer.ch-footer .ch-footer-griglia { grid-template-columns:var(--ch-footer-griglia, 1.6fr 1.1fr .9fr 1.1fr); }
  @media (max-width:860px) { footer.ch-footer .ch-footer-griglia { grid-template-columns:1fr 1fr; } }
  @media (max-width:520px) { footer.ch-footer .ch-footer-griglia { grid-template-columns:1fr; } }
  footer.ch-footer .ch-footer-fascia { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; max-width:1180px; margin:0 auto; padding:36px 5vw; }
  footer.ch-footer .ch-footer-fascia h4 { margin:0; flex:1 1 280px; }
  footer.ch-footer .ch-footer-fascia .ch-footer-testo { flex-basis:100%; order:3; margin:0; }
  /* ── 2.7.0 — TRAILER, PRIMO PIANO, LETTORE A TUTTO SCHERMO ──────────────
     Aspetto essenziale e neutro, coi colori del tema: il carattere di ogni
     sito lo da' il suo CSS. */
  .ch-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .ch-trailer { margin:1.5em 0; }
  .ch-trailer-filtri { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 14px; scrollbar-width:none; }
  .ch-trailer-filtri::-webkit-scrollbar { display:none; }
  .ch-trailer-chip { flex:none; font:inherit; font-size:.9em; cursor:pointer; padding:9px 16px; border-radius:999px; border:1.5px solid rgba(0,0,0,.14); background:transparent; color:var(--ch-testo); }
  .ch-trailer-chip:hover { border-color:var(--ch-accento); }
  .ch-trailer-chip[aria-pressed="true"] { background:var(--ch-accento); border-color:var(--ch-accento); color:#fff; }
  .ch-trailer-chip small { opacity:.65; margin-left:4px; font-size:.8em; }
  .ch-trailer-griglia { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:28px; }
  .ch-trailer-scheda { display:flex; flex-direction:column; gap:12px; min-width:0; }
  .ch-trailer-scheda[hidden] { display:none !important; }
  .ch-trailer-locandina { position:relative; display:block; aspect-ratio:16/9; max-width:100%; border-radius:14px; overflow:hidden; background:#1d2433 center/cover no-repeat; }
  .ch-trailer-play { position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:16px; background:var(--ch-accento); box-shadow:0 8px 22px rgba(0,0,0,.35); transition:transform .2s ease; }
  .ch-trailer-play::before { content:""; position:absolute; left:23px; top:18px; border-left:16px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent; }
  .ch-trailer-locandina:hover .ch-trailer-play, .ch-trailer-locandina:focus-visible .ch-trailer-play { transform:scale(1.08); }
  .ch-trailer-etichette { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
  .ch-trailer-etichette span { font-size:.72em; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:6px; background:rgba(0,0,0,.06); }
  .ch-trailer-etichette .ch-trailer-nuovo { background:var(--ch-accento); color:#fff; }
  .ch-trailer-titolo { margin:0; font-size:1.25em; line-height:1.2; }
  .ch-trailer-estratto { margin:4px 0 0; opacity:.75; font-size:.95em; }
  .ch-trailer-stato { margin:4px 0 0; font-size:.88em; font-weight:600; color:var(--ch-accento); }
  .ch-trailer-pulsanti, .ch-pp-pulsanti { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; }
  .ch-trailer-pulsanti .ch-btn { flex:1 1 auto; text-align:center; }
  .ch-btn.ch-btn-secondario { background:transparent !important; color:inherit !important; border:1.5px solid currentColor; }
  .ch-primo-piano { display:grid; gap:32px; align-items:center; margin:1.5em 0; }
  .ch-primo-piano.ch-pp-con-apertura { grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); }
  .ch-pp-apertura { margin:0 0 .4em; line-height:1.08; }
  .ch-pp-apertura em { display:block; font-style:normal; color:var(--ch-accento); }
  .ch-pp-testo { margin:0; opacity:.85; }
  .ch-pp-voci { display:grid; gap:24px; min-width:0; }
  .ch-pp-voce { display:grid; gap:10px; min-width:0; }
  .ch-pp-occhiello { margin:0; justify-self:start; font-size:.8em; font-weight:600; padding:6px 12px; border-radius:999px; background:var(--ch-accento); color:#fff; }
  .ch-pp-titolo { margin:0; font-size:1.4em; }
  .ch-pp-titolo a { color:inherit; text-decoration:none; }
  .ch-pp-estratto { margin:0; opacity:.8; }
  .ch-pp-cornice { order:-1; }
  .ch-pp-voci[data-n="1"] .ch-pp-cornice .ch-trailer-locandina { border-radius:18px; }
  @media (max-width:860px) { .ch-primo-piano.ch-pp-con-apertura { grid-template-columns:minmax(0, 1fr); } }
  .ch-articolo-trailer { margin:0 0 1.6em; }
  .ch-articolo-trailer-voce { display:grid; gap:12px; }
  .ch-lettore { position:fixed; inset:0; z-index:2147483000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); background:rgba(10,14,24,.95); color:#fff; overflow-y:auto; }
  .ch-lettore[hidden] { display:none !important; }
  .ch-lettore-schermo { position:relative; width:min(100%, calc((100vh - 220px) * 16 / 9), 1280px); max-width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
  .ch-lettore-schermo iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
  .ch-lettore-chiudi { position:absolute; top:max(12px, env(safe-area-inset-top, 0px)); right:16px; width:46px; height:46px; border:0; border-radius:14px; background:var(--ch-accento); color:#fff; font-size:26px; line-height:1; cursor:pointer; }
  .ch-lettore-sotto { width:min(100%, 1280px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
  .ch-lettore-sotto strong { display:block; font-size:1.3em; }
  .ch-lettore-stato { opacity:.8; font-size:.92em; }
  .ch-lettore-pulsanti { display:flex; flex-wrap:wrap; gap:10px; }
  .ch-lettore .ch-btn { display:inline-block; padding:12px 20px; border-radius:10px; background:var(--ch-accento); color:#fff; text-decoration:none; font-weight:600; }
  .ch-lettore .ch-btn.ch-btn-secondario { border-color:rgba(255,255,255,.5); }
  html.ch-lettore-aperto, html.ch-lettore-aperto body { overflow:hidden; }
  /* 2.7.4 — visore delle foto del cliente */
  .ch-visore { position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; background:rgba(10,14,24,.96); color:#fff; touch-action:pan-y; }
  .ch-visore[hidden] { display:none; }
  .ch-visore img { max-width:calc(100vw - 32px); max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px); width:auto; height:auto; object-fit:contain; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
  .ch-visore-didascalia { position:absolute; left:16px; right:16px; bottom:max(16px, env(safe-area-inset-bottom, 0px)); margin:0; text-align:center; font-size:.95em; opacity:.85; }
  .ch-visore button { position:absolute; width:46px; height:46px; border:0; border-radius:14px; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; cursor:pointer; }
  .ch-visore button:hover, .ch-visore button:focus-visible { background:var(--ch-accento); }
  .ch-visore .ch-visore-chiudi { top:max(12px, env(safe-area-inset-top, 0px)); right:16px; background:var(--ch-accento); }
  .ch-visore .ch-visore-prec { left:12px; top:50%; margin-top:-23px; }
  .ch-visore .ch-visore-succ { right:12px; top:50%; margin-top:-23px; }
  .ch-foto-cliente .ch-gal-voce a { cursor:zoom-in; }
  /* 2.7.5 — area riservata: modulo d'accesso e barra dell'ospite */
  .ch-accesso { max-width:420px; margin:2.5em auto; padding:28px; border:1px solid rgba(0,0,0,.1); border-radius:14px; }
  .ch-accesso-titolo { margin:0 0 .4em; }
  .ch-accesso-spiega { margin:0 0 1.2em; opacity:.8; }
  .ch-accesso .ch-campo { margin:0 0 14px; }
  .ch-accesso label { display:block; font-weight:600; margin-bottom:6px; }
  .ch-accesso input[type=text], .ch-accesso input[type=password] { width:100%; box-sizing:border-box; padding:11px 12px; font:inherit; border:1.5px solid rgba(0,0,0,.2); border-radius:8px; background:#fff; color:#111; }
  .ch-accesso input:focus { outline:2px solid var(--ch-accento); outline-offset:1px; }
  .ch-accesso .ch-btn { width:100%; cursor:pointer; }
  .ch-accesso-esito { margin:0 0 1em; padding:10px 14px; border-radius:8px; background:#fdecea; color:#8a1c12; }
  .ch-accesso-esito[hidden] { display:none; }
  .ch-ospite-barra { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin:0 0 1em; font-size:.9em; opacity:.85; }
  .ch-ospite-barra a { color:inherit; }
  @media (prefers-reduced-motion:reduce) { .ch-trailer-play { transition:none; } }
  .ch-banner-zona { display:grid; gap:16px; margin:1.5em 0; }
  .ch-banner { display:block; line-height:0; border-radius:12px; overflow:hidden; }
  .ch-banner img { display:block; width:100%; height:auto; }