/* Contrametric — la veste del sito.
 *
 * È la home approvata (A2 «Quinte», mockups-2026/home/quinte.html) riportata
 * sui blocchi di WordPress: le sezioni sono gruppi, titoli, paragrafi e
 * immagini normali, riconosciuti dalla loro classe (cm-…). Lo stesso foglio
 * veste anche l'editor, così quello che si compone somiglia a quello che esce.
 *
 * Indice: misure · base · testata · menù a quinte · apertura · sezioni ·
 * in programma · la storia · endorsements · newsletter · unisciti a noi ·
 * sostenitori · piè di pagina · chi siamo · pagine · la parete delle foto ·
 * editor · telefono e tablet.
 */

/* ─── MISURE ───────────────────────────────────────────────── */
:root {
	--cm-nero: var(--wp--preset--color--nero, #0D0D0D);
	--cm-grafite: var(--wp--preset--color--grafite, #1A1A1A);
	--cm-bordeaux: var(--wp--preset--color--bordeaux, #9B0325);
	--cm-bordeaux-scuro: var(--wp--preset--color--bordeaux-scuro, #7F021E);
	--cm-rosa: var(--wp--preset--color--rosa, #E8A9B2);
	--cm-bianco: var(--wp--preset--color--bianco, #FFFFFF);
	--cm-tenue: rgba(255, 255, 255, .66);
	--cm-linea: rgba(255, 255, 255, .22);
	--cm-font: var(--wp--preset--font-family--pt-sans-narrow, "PT Sans Narrow", "Arial Narrow", Arial, sans-serif);
	--cm-alta: 84px;
	--cm-barra: 0px;
	--cm-gutter: max(20px, env(safe-area-inset-left, 0px));
	--cm-gutter-r: max(20px, env(safe-area-inset-right, 0px));
	--cm-curva: cubic-bezier(.2, .7, .2, 1);
}
/* La barra di WordPress per chi è entrato: la testata le sta sotto. */
.admin-bar { --cm-barra: 32px; }
@media (max-width: 782px) { .admin-bar { --cm-barra: 46px; } }

/* ─── BASE ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--cm-rosa); outline-offset: 3px; }
.wp-site-blocks > * { margin-block: 0; }
.cm-dentro { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--cm-gutter) var(--cm-gutter-r); }

/* L'occhiello: la riga piccola in maiuscolo con il trattino bordeaux. */
.cm-occhiello { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; }
.cm-occhiello::before { content: ""; flex: none; width: 44px; height: 3px; background: var(--cm-bordeaux); }

/* ─── TESTATA ──────────────────────────────────────────────── */
.cm-testata { position: fixed; top: var(--cm-barra); left: 0; right: 0; z-index: 50; display: flex; align-items: stretch; height: calc(var(--cm-alta) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid var(--cm-linea); transition: transform .45s var(--cm-curva), background-color .35s; }
/* ⚠️ La testata con il fondo si chiama `cm-con-fondo`, non `cm-piena`: quel nome è
   del modello a tutta larghezza, che si dà 84 px di spazio in cima. Con lo stesso
   nome la testata se li prendeva, e marchio e «Menù» scendevano di 42 px (21/10/2026). */
.cm-testata.cm-con-fondo, .cm-aperto .cm-testata { background: var(--cm-nero); }
.cm-testata.cm-nascosta { transform: translateY(calc(-110% - var(--cm-barra))); }
.cm-testata::after { content: ""; position: absolute; left: 0; bottom: -1px; width: var(--cm-letto, 0%); height: 3px; background: var(--cm-bordeaux); opacity: 0; transition: opacity .3s; }
.cm-testata.cm-con-fondo::after { opacity: 1; }
.cm-marchio { flex: none; align-self: center; width: calc(var(--cm-alta) - 22px); height: calc(var(--cm-alta) - 22px); margin: 0 22px 0 var(--cm-gutter); }
.cm-marchio img { display: block; width: 100%; height: 100%; }
.cm-apri { align-self: center; display: flex; align-items: center; gap: 16px; min-width: 150px; height: 54px; margin: 0 var(--cm-gutter-r) 0 auto; padding: 0 24px; border: 0; border-radius: 15px; background: var(--cm-bordeaux); color: var(--cm-bianco); font: 700 15px/1 var(--cm-font); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.cm-apri:hover { background: var(--cm-bordeaux-scuro); }
.cm-righe { position: relative; width: 26px; height: 16px; }
.cm-righe i { position: absolute; left: 0; width: 26px; height: 2px; background: currentColor; transition: transform .45s var(--cm-curva), top .3s, opacity .2s; }
.cm-righe i:nth-child(1) { top: 0; }
.cm-righe i:nth-child(2) { top: 7px; width: 18px; }
.cm-righe i:nth-child(3) { top: 14px; }
.cm-aperto .cm-righe i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.cm-aperto .cm-righe i:nth-child(2) { opacity: 0; }
.cm-aperto .cm-righe i:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ─── MENÙ: LE QUINTE ──────────────────────────────────────── */
.cm-menu { position: fixed; top: var(--cm-barra); left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; padding-top: calc(var(--cm-alta) + env(safe-area-inset-top, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--cm-nero); visibility: hidden; transition: visibility 0s 1s; }
.cm-aperto .cm-menu { visibility: visible; transition: none; }
.cm-file { flex: 1; min-height: 0; display: flex; gap: 1px; background: var(--cm-nero); }
.cm-quinta { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; transform: translateX(105vw); transition: transform .85s cubic-bezier(.77, 0, .18, 1), flex-grow .6s var(--cm-curva); }
.cm-aperto .cm-quinta { transform: none; }
.cm-quinta:nth-child(1) { transition-delay: .2s, 0s; }
.cm-quinta:nth-child(2) { transition-delay: .15s, 0s; }
.cm-quinta:nth-child(3) { transition-delay: .1s, 0s; }
.cm-quinta:nth-child(4) { transition-delay: .05s, 0s; }
.cm-quinta:nth-child(5) { transition-delay: 0s, 0s; }
.cm-aperto .cm-quinta:nth-child(1) { transition-delay: 0s, 0s; }
.cm-aperto .cm-quinta:nth-child(2) { transition-delay: .06s, 0s; }
.cm-aperto .cm-quinta:nth-child(3) { transition-delay: .12s, 0s; }
.cm-aperto .cm-quinta:nth-child(4) { transition-delay: .18s, 0s; }
.cm-aperto .cm-quinta:nth-child(5) { transition-delay: .24s, 0s; }
.cm-quinta-foto { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.1); transform: scale(1.08); transition: filter .6s, transform 1.4s var(--cm-curva); }
.cm-quinta::after { content: ""; position: absolute; inset: 0; background: var(--cm-bordeaux); mix-blend-mode: multiply; opacity: .92; transition: opacity .5s; }
.cm-quinta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 40%, rgba(13, 13, 13, .85)); }
.cm-quinta.cm-attiva { flex-grow: 3.2; }
.cm-quinta.cm-attiva .cm-quinta-foto { filter: grayscale(.15); transform: scale(1); }
.cm-quinta.cm-attiva::after { opacity: .35; }
.cm-nome { position: absolute; z-index: 2; left: 16px; bottom: 26px; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: clamp(38px, 4.6vw, 70px); line-height: 1; text-transform: uppercase; white-space: nowrap; transition: opacity .3s; }
.cm-quinta.cm-attiva .cm-nome { opacity: 0; }
.cm-voci-q { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 30px; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .35s, transform .45s; }
.cm-quinta.cm-attiva .cm-voci-q { opacity: 1; transform: none; pointer-events: auto; transition-delay: .2s; }
.cm-voci-q h3 { margin: 0 0 16px; font-size: clamp(46px, 5.2vw, 86px); line-height: .9; text-transform: uppercase; }
.cm-voci-q a { display: block; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .3); font-size: 24px; white-space: nowrap; transition: padding .25s, color .2s; }
.cm-voci-q a:hover { padding-left: 10px; color: var(--cm-rosa); }

/* ─── APERTURA: IL VIDEO E I TELI ──────────────────────────── */
body .cm-apertura { position: relative; height: 100svh; min-height: 640px; margin-block: 0; overflow: hidden; isolation: isolate; background-color: var(--cm-nero); }
.cm-apertura .cm-filmato { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.cm-apertura::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(13, 13, 13, .55) 0%, rgba(13, 13, 13, 0) 26%, rgba(13, 13, 13, .3) 58%, var(--cm-nero) 100%); }
.cm-teli { position: absolute; inset: 0; z-index: -1; display: flex; pointer-events: none; }
.cm-teli i { flex: 1; background: var(--cm-nero); animation: cm-telo 1.15s cubic-bezier(.77, 0, .18, 1) forwards; }
.cm-teli i:nth-child(1) { animation-delay: .35s; }
.cm-teli i:nth-child(2) { animation-delay: .45s; }
.cm-teli i:nth-child(3) { animation-delay: .55s; }
.cm-teli i:nth-child(4) { animation-delay: .65s; }
.cm-teli i:nth-child(5) { animation-delay: .75s; }
@keyframes cm-telo { to { transform: translateY(-101%); visibility: hidden; } }
@keyframes cm-compare { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-sale { from { transform: translateY(100%); } to { transform: none; } }
.cm-apertura-contenuto { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: end; gap: 30px; max-width: 1440px; margin-inline: auto; padding: 0 var(--cm-gutter-r) 64px var(--cm-gutter); }
.cm-apertura .cm-apertura-testo > *, .cm-apertura .cm-coming-soon > * { margin-block: 0; }
.cm-apertura .cm-titolo { margin-top: 14px; font-size: var(--wp--preset--font-size--enorme); line-height: .84; }
/* L'occhiello dentro l'H1 della home (27/10/2026): la stessa riga piccola di
   prima, con il suo filetto; il titolo grande comincia sotto, alla stessa
   distanza di quando erano due elementi. */
.cm-apertura .cm-titolo-con-ente { margin-top: 0; }
.cm-titolo-con-ente > .cm-occhiello { margin-bottom: 14px; font-size: 14px; font-weight: 400; line-height: 1.4; }
.cm-occhiello-parte { white-space: nowrap; }
@media (max-width: 600px) {
	.cm-occhiello-punto { display: none; }
	.cm-occhiello-parte { display: block; }
}
.cm-titolo .cm-riga { display: block; overflow: hidden; }
.cm-titolo .cm-riga > span { display: inline-block; }
.cm-apertura .cm-sotto { max-width: 46ch; margin-top: 22px; color: rgba(255, 255, 255, .86); font-size: 21px; line-height: 1.4; }
.cm-sotto:empty { display: none; }
/* Le apparizioni, solo sul sito: nell'editor il testo si vede subito. */
.cm-apertura:not(.cm-apertura-editor) .cm-occhiello { opacity: 0; animation: cm-compare .8s 1.3s forwards; }
.cm-apertura:not(.cm-apertura-editor) .cm-sotto { opacity: 0; animation: cm-compare .8s 1.7s forwards; }
.cm-apertura:not(.cm-apertura-editor) .cm-coming-soon { opacity: 0; animation: cm-compare .8s 1.8s forwards; }
.cm-titolo .cm-riga > span { transform: translateY(100%); animation: cm-sale 1s var(--cm-curva) forwards; animation-delay: 1.2s; }
.cm-titolo .cm-riga:nth-child(2) > span { animation-delay: 1.35s; }
.cm-titolo .cm-riga:nth-child(3) > span { animation-delay: 1.5s; }

/* Coming soon: il riquadro con le prossime date. */
.cm-coming-soon { overflow: hidden; border-radius: 15px; background: rgba(13, 13, 13, .82); box-shadow: inset 0 3px 0 var(--cm-bordeaux); }
.cm-coming-soon .wp-block-heading { padding: 16px 20px 10px; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: .3em; color: var(--cm-tenue); }
.cm-coming-soon .cm-prossimo { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; margin: 0; padding: 12px 20px; border-top: 1px solid var(--cm-linea); transition: background .2s; }
.cm-coming-soon .cm-prossimo:hover { background: var(--cm-bordeaux); }
.cm-coming-soon .cm-prossimo > * { margin: 0; }
.cm-coming-soon .cm-prossimo::after { content: "→"; grid-column: 3; grid-row: 1 / span 2; font-size: 22px; }
.cm-coming-soon .cm-prossimo-data { grid-column: 1; grid-row: 1 / span 2; font-size: 13px; line-height: .9; letter-spacing: .2em; }
.cm-coming-soon .cm-prossimo-data::first-line { font-size: 34px; font-weight: 700; letter-spacing: 0; }
.cm-coming-soon .cm-prossimo-titolo { grid-column: 2; font-size: 19px; line-height: 1.15; text-transform: uppercase; }
.cm-coming-soon .cm-prossimo-titolo a::after { content: ""; position: absolute; inset: 0; }
.cm-coming-soon .cm-prossimo-luogo { grid-column: 2; color: var(--cm-tenue); font-size: 14px; line-height: 1.3; }

/* ─── SEZIONI ──────────────────────────────────────────────── */
body .cm-sezione { margin-block: 0; padding-block: 110px; }
.cm-sezione h2.wp-block-heading { margin: 0; font-size: var(--wp--preset--font-size--titolo); line-height: .9; }
.cm-principale.cm-piena .wp-block-post-content > * { margin-block: 0; }

/* ─── IN PROGRAMMA ─────────────────────────────────────────── */
/* «In programma» è più larga delle altre sezioni: 1600 px invece di 1440
   (utente, 25/10/2026: «renderei leggermente più grandi le card della
   vetrina»). Titolo, «Sfoglia il cartellone» e locandine si allargano insieme,
   così restano allineati fra loro; sotto i 1600 px di finestra non cambia
   niente, perché le quattro colonne prendono già tutta la larghezza. */
.cm-programma .cm-dentro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 20px; max-width: 1600px; }
.cm-programma .cm-dentro > * { margin: 0; }
.cm-programma .cm-dentro > h2.wp-block-heading { grid-column: 1; grid-row: 1; margin-bottom: 36px; }
.cm-programma .cm-sfoglia { grid-column: 2; grid-row: 1; margin-bottom: 36px; font-size: 15px; }
.cm-programma .cm-vetrina { grid-column: 1 / -1; grid-row: 2; }
.cm-sfoglia a { padding-bottom: 4px; border-bottom: 2px solid var(--cm-bordeaux); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; transition: background .2s, color .2s; }
.cm-sfoglia a:hover { color: var(--cm-rosa); }
.cm-scopri a { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 3px; border-bottom: 2px solid var(--cm-bordeaux); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }

/* ─── LA VETRINA A QUINTE (25/10/2026) ───────────────────────
   La A dei mockup «Le quinte»: la prima — l'evento più vicino a oggi — è
   aperta, le altre aspettano di lato in bordeaux, come le quinte del menù.
   La composizione è in inc/boxoffice.php, il movimento in sito.js. */
.cm-vetrina { display: flex; gap: 12px; height: clamp(480px, 36vw, 600px); }
.cm-vq { position: relative; flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden; border-radius: 15px; background: var(--cm-grafite); cursor: pointer; isolation: isolate; transition: flex-grow .9s var(--cm-curva); }
.cm-vq.cm-vq-aperta { flex-grow: 3.4; }
.cm-vq-fondo { position: absolute; inset: -20px; z-index: -2; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.15) brightness(.5); transform: scale(1.1); transition: filter .9s var(--cm-curva), transform 1.4s var(--cm-curva); }
.cm-vq::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(155, 3, 37, .62), rgba(13, 13, 13, .92) 78%); transition: opacity .8s; }
.cm-vq:hover:not(.cm-vq-aperta) .cm-vq-fondo { filter: grayscale(.4) contrast(1.1) brightness(.6); transform: scale(1.16); }
.cm-vq.cm-vq-aperta .cm-vq-fondo { filter: blur(26px) brightness(.32) saturate(1.3); transform: scale(1.3); }
.cm-vq.cm-vq-aperta::before { opacity: .55; }
/* I teli bordeaux che si alzano entrando, uno dopo l'altro. */
.cm-vq::after { content: ""; position: absolute; inset: 0; z-index: 5; background: var(--cm-bordeaux); transform-origin: 50% 0; transform: scaleY(0); transition: transform 1s cubic-bezier(.77, 0, .18, 1); transition-delay: calc(var(--cm-i, 0) * 120ms + .1s); pointer-events: none; }
.cm-js .cm-vetrina:not(.cm-visto) .cm-vq::after { transform: none; }
.cm-vq-chiusa { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 26px 22px; transition: opacity .35s; }
.cm-vq.cm-vq-aperta .cm-vq-chiusa { opacity: 0; pointer-events: none; }
.cm-vq-data { margin: 0; display: grid; color: var(--cm-rosa); font-size: 14px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; line-height: 1.1; }
.cm-vq-data b { color: var(--cm-bianco); font-size: 76px; line-height: .86; letter-spacing: 0; }
.cm-vq-nome { margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 64%; overflow: hidden; font-size: clamp(26px, 2.2vw, 38px); font-weight: 700; line-height: 1; text-transform: uppercase; }
.cm-vq-dentro { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 34px; padding: 22px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.cm-vq.cm-vq-aperta .cm-vq-dentro { opacity: 1; pointer-events: auto; transition: opacity .6s .4s; }
.cm-vq-loc { display: contents; }
.cm-vq-dentro img { display: block; height: 100%; width: auto; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); transform: translateY(24px) scale(.97); transition: transform .9s var(--cm-curva) .35s; }
.cm-vq.cm-vq-aperta .cm-vq-dentro img { transform: none; }
.cm-vq-testo { align-self: end; display: grid; justify-items: start; gap: 12px; min-width: 0; padding-bottom: 6px; transform: translateX(-16px); transition: transform .9s var(--cm-curva) .45s; }
.cm-vq.cm-vq-aperta .cm-vq-testo { transform: none; }
.cm-vq-testo > * { margin: 0; }
.cm-vq-cat { color: var(--cm-tenue); font-size: 13px; letter-spacing: .24em; text-transform: uppercase; }
.cm-vq-grande { display: flex; align-items: flex-end; gap: 14px; color: var(--cm-rosa); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.25; }
.cm-vq-grande b { color: var(--cm-bianco); font-size: clamp(84px, 7vw, 124px); line-height: .8; letter-spacing: 0; }
.cm-vq-testo h3.wp-block-heading { font-size: clamp(30px, 2.6vw, 44px); line-height: .98; text-transform: uppercase; text-wrap: balance; }
.cm-vq-luogo { color: var(--cm-tenue); font-size: 17px; line-height: 1.4; }
.cm-vq-testo .cm-scopri { margin-top: 8px; }
/* Lo sfondo sfocato di una riga aperta sul telefono si muove piano (vedi sotto, 900 px). */
@keyframes cm-deriva { from { transform: scale(1.3) translate3d(0, 0, 0); } to { transform: scale(1.42) translate3d(-3%, -2%, 0); } }

/* ─── LA NOSTRA STORIA ─────────────────────────────────────── */
body .cm-storia-fascia { padding-top: 20px; }
.cm-storia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 60px; }
.cm-storia > * { margin: 0; }
.cm-storia .wp-block-image img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 15px; }
.cm-storia-testo > :first-child { margin-top: 0; }
.cm-storia h2.wp-block-heading { margin: 18px 0 22px; font-size: clamp(36px, 5vw, 68px); line-height: .95; }
.cm-storia p:not(.cm-occhiello) { max-width: 58ch; color: rgba(255, 255, 255, .86); font-size: 20px; }
.cm-storia .cm-leggi { display: flex; justify-content: flex-end; margin-top: 26px; }
.cm-leggi a { padding-bottom: 4px; border-bottom: 2px solid var(--cm-bordeaux); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; transition: color .2s; }
.cm-leggi a:hover { color: var(--cm-rosa); }

/* ─── ENDORSEMENTS ─────────────────────────────────────────── */
.cm-endorsement { position: relative; overflow: hidden; isolation: isolate; }
.cm-endorsement::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/sala-bn.jpg") center / cover no-repeat; opacity: .22; }
.cm-endorsement::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--cm-nero) 0%, rgba(13, 13, 13, .35) 30%, rgba(13, 13, 13, .35) 70%, var(--cm-nero) 100%); }
.cm-endorsement .cm-dentro > h2.wp-block-heading { margin-bottom: 36px; }
.cm-endorsement-griglia { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 56px; }
.cm-endorsement-griglia > * { margin: 0; }
.cm-citazione.wp-block-quote { margin: 0; padding: 0; border: 0; }
.cm-citazione::before { content: "“"; display: block; height: 54px; color: var(--cm-bordeaux); font-size: 130px; font-weight: 700; line-height: .8; }
.cm-citazione p { margin: 0; font-size: var(--wp--preset--font-size--grande); font-weight: 700; line-height: 1.14; }
.cm-citazione cite { display: block; margin-top: 26px; padding-left: 16px; border-left: 3px solid var(--cm-bordeaux); color: var(--cm-tenue); font-size: 17px; font-style: normal; line-height: 1.45; }
.cm-citazione cite strong { display: block; color: var(--cm-bianco); font-size: 20px; letter-spacing: .14em; text-transform: uppercase; }
.cm-citazione cite br { display: none; }

/* Il video con la copertina: parte solo quando lo si chiede. */
.cm-video-scheda { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 15px; background: #000; }
.cm-video-scheda video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-video-scheda .cm-copertina { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
.cm-play { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 24px 0 22px; border: 0; border-radius: 15px; background: var(--cm-bordeaux); color: var(--cm-bianco); font: 700 15px/1 var(--cm-font); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: background .2s, transform .2s; }
.cm-play:hover { background: var(--cm-bordeaux-scuro); transform: translateY(-2px); }
.cm-play i { width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 15px solid currentColor; }
.cm-video-scheda.cm-in-corso .cm-play, .cm-video-scheda.cm-in-corso .cm-copertina { display: none; }

/* ─── NEWSLETTER ───────────────────────────────────────────── */
body .cm-newsletter { padding-block: 56px; border-block: 1px solid var(--cm-linea); background: var(--cm-grafite); }
.cm-newsletter .cm-dentro > * { margin: 0; }
.cm-riga-newsletter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.cm-newsletter .cm-dentro > .cm-riga-newsletter { margin-top: 14px; }
.cm-riga-newsletter > * { margin: 0; }
.cm-newsletter h2.wp-block-heading { font-size: clamp(36px, 5vw, 70px); }
.cm-tasto .wp-block-button__link { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 30px; border-radius: 15px; font-size: 16px; letter-spacing: .18em; white-space: nowrap; transition: background .2s, transform .2s; }
.cm-tasto .wp-block-button__link:hover { background: var(--cm-bordeaux-scuro); transform: translateY(-2px); }

/* ─── UNISCITI A NOI ───────────────────────────────────────── */
body .cm-sostegno { background: var(--cm-bordeaux); }
.cm-sostegno .cm-dentro > * { margin: 0; }
.cm-sostegno .cm-dentro > h2.wp-block-heading { margin-bottom: 36px; }
.cm-griglia-sostegno { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .35); }
.cm-griglia-sostegno > .cm-voce { position: relative; margin: 0; padding: 28px 24px 30px 0; border-right: 1px solid rgba(255, 255, 255, .35); }
.cm-griglia-sostegno > .cm-voce + .cm-voce { padding-left: 24px; }
.cm-griglia-sostegno > .cm-voce:last-child { border-right: 0; }
.cm-voce h3.wp-block-heading { margin: 0 0 10px; font-size: 32px; line-height: 1; }
.cm-voce h3.wp-block-heading::after { content: "→"; display: inline-block; margin-left: .25em; font-weight: 400; transition: transform .25s; }
.cm-voce:hover h3.wp-block-heading::after, .cm-voce:focus-within h3.wp-block-heading::after { transform: translateX(6px); }
.cm-voce h3 a::after { content: ""; position: absolute; inset: 0; }
.cm-voce:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cm-voce p { margin: 0; color: rgba(255, 255, 255, .9); font-size: 18px; }

/* ─── SOSTENITORI ──────────────────────────────────────────── */
body .cm-sostenitori { padding-block: 80px; }
.cm-sostenitori .cm-dentro > * { margin: 0; }
.cm-sostenitori .cm-dentro > h2.wp-block-heading { margin-bottom: 28px; }
.cm-pannello { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: 15px; background: var(--cm-bianco); color: var(--cm-nero); }
.cm-pannello > .cm-gruppo-loghi { grid-column: span 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titolo piu" "loghi loghi"; align-items: baseline; column-gap: 12px; margin: 0; padding: 26px 30px 30px; border-top: 1px solid #E2E2E2; }
.cm-pannello > .cm-gruppo-loghi:nth-child(odd) { grid-column: span 2; }
.cm-pannello > .cm-gruppo-loghi:nth-child(even) { border-left: 1px solid #E2E2E2; }
.cm-pannello > .cm-gruppo-loghi:nth-child(-n+2) { border-top: 0; }
.cm-pannello > .cm-gruppo-loghi:nth-child(3) { grid-column: span 4; }
.cm-pannello > .cm-gruppo-loghi:nth-child(4) { grid-column: span 2; }
.cm-gruppo-loghi > * { margin: 0; }
.cm-gruppo-loghi > h3.wp-block-heading { grid-area: titolo; margin-bottom: 20px; font-size: 15px; font-weight: 400; line-height: 1.3; letter-spacing: .22em; }
.cm-gruppo-loghi h3 strong { color: var(--cm-bordeaux); font-weight: 700; }
.cm-gruppo-loghi > .cm-piu { grid-area: piu; font-size: 13px; }
.cm-piu a { padding-bottom: 2px; border-bottom: 2px solid var(--cm-bordeaux); color: var(--cm-nero); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.cm-gruppo-loghi > .cm-loghi { grid-area: loghi; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
.cm-loghi > .wp-block-image { margin: 0; }
/* ⚠️ `!important` per l'editor: lì WordPress scrive `style="height:auto"` su
   ogni immagine, e quello stile in linea vince sulla regola — i loghi uscivano a
   grandezza naturale, uno sotto l'altro. Sul sito lo stile in linea non c'è. */
.cm-loghi img { display: block; width: auto; height: var(--h, 40px) !important; max-width: 100%; }
.cm-loghi a { display: block; transition: transform .2s; }
.cm-loghi a:hover { transform: translateY(-2px); }
/* L'altezza di ogni marchio: si sceglie con una classe, così i marchi hanno la stessa area. */
.cm-h-30 { --h: 30px; } .cm-h-33 { --h: 33px; } .cm-h-34 { --h: 34px; } .cm-h-36 { --h: 36px; }
.cm-h-38 { --h: 38px; } .cm-h-40 { --h: 40px; } .cm-h-44 { --h: 44px; } .cm-h-46 { --h: 46px; }
.cm-h-50 { --h: 50px; } .cm-h-56 { --h: 56px; } .cm-h-60 { --h: 60px; } .cm-h-62 { --h: 62px; }

/* ─── PIÈ DI PAGINA ────────────────────────────────────────── */
.cm-piede { border-top: 1px solid var(--cm-linea); background: var(--cm-nero); color: var(--cm-tenue); font-size: 16px; }
.cm-piede .cm-dentro > * { margin: 0; }
.cm-piede-alto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-block: 44px 34px; border-bottom: 1px solid var(--cm-linea); }
.cm-piede-alto > * { margin: 0; }
.cm-piede .cm-cerca { position: relative; flex: 0 1 380px; margin: 0; }
.cm-piede .cm-cerca input { width: 100%; height: 50px; margin: 0; padding: 0 52px 0 18px; border: 1px solid var(--cm-linea); border-radius: 15px; background: var(--cm-grafite); color: var(--cm-bianco); font: 17px var(--cm-font); box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.cm-piede .cm-cerca input::placeholder { color: rgba(255, 255, 255, .5); }
.cm-piede .cm-cerca input:focus { border-color: var(--cm-bianco); outline: none; }
.cm-piede .cm-cerca input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cm-piede .cm-cerca button { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 38px; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--cm-bianco); cursor: pointer; }
.cm-piede .cm-cerca button:hover { background: var(--cm-bordeaux); }
.cm-piede .cm-mappa { margin: 0; }
.cm-mappa > summary { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 18px; border: 1px solid var(--cm-linea); border-radius: 15px; background: var(--cm-grafite); color: var(--cm-bianco); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; list-style: none; cursor: pointer; }
.cm-mappa > summary::-webkit-details-marker { display: none; }
.cm-mappa > summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .25s; }
.cm-mappa[open] > summary { border-color: var(--cm-bianco); }
.cm-mappa[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.cm-mappa .cm-voci-piede { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 10px 0 0; padding: 4px 18px; border: 1px solid var(--cm-linea); border-radius: 15px; list-style: none; }
.cm-mappa .cm-voci-piede li { margin: 0; }
.cm-mappa .cm-voci-piede a { display: block; padding: 11px 0; border-bottom: 1px solid var(--cm-linea); color: var(--cm-bianco); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; }
.cm-mappa .cm-voci-piede li:nth-last-child(-n+2) a { border-bottom: 0; }
.cm-mappa .cm-voci-piede a:hover { color: var(--cm-rosa); }
/* Sul computer la mappa è una riga di voci sempre aperta (la apre sito.js). */
@media (min-width: 901px) {
	.cm-mappa.cm-sempre > summary { display: none; }
	.cm-mappa.cm-sempre .cm-voci-piede { display: flex; flex-wrap: wrap; gap: 6px 30px; margin: 0; padding: 0; border: 0; border-radius: 0; }
	.cm-mappa.cm-sempre .cm-voci-piede a { padding: 0; border: 0; }
}
.cm-piede-centro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; padding-block: 40px; }
.cm-piede-centro > * { margin: 0; }
.cm-ente { display: flex; align-items: center; gap: 24px; }
.cm-ente > * { margin: 0; }
.cm-ente .wp-block-image { flex: none; }
.cm-ente .wp-block-image img { display: block; width: 92px; height: 92px; }
.cm-ente p { line-height: 1.55; }
.cm-ente strong { color: var(--cm-bianco); letter-spacing: .08em; }
.cm-ente a:hover { color: var(--cm-bianco); }
.cm-piede-contatti { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: max-content; max-width: 100%; }
.cm-piede-contatti > * { margin: 0; }
/* La newsletter: un tasto nero con il bordo bordeaux, sopra i social, largo quanto la loro fila. */
/* Il nucleo mette `display: inline-block` sui tasti dentro `.wp-block-buttons`: qui serve largo quanto la colonna. */
.cm-piede-contatti .wp-block-buttons > .wp-block-button.cm-tasto-piede { display: block; width: 100%; margin: 0; }
.cm-tasto-piede .wp-block-button__link { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; padding: 0 20px; border: 2px solid var(--cm-bordeaux); border-radius: 15px; background: var(--cm-nero); color: var(--cm-bianco); font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; box-sizing: border-box; transition: background .2s; }
.cm-tasto-piede .wp-block-button__link:hover { background: var(--cm-bordeaux); color: var(--cm-bianco); }
.cm-piede-contatti .wp-block-buttons { display: block; margin: 0; }
.cm-piede .cm-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.cm-piede .cm-social a { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--cm-linea); border-radius: 15px; color: var(--cm-bianco); transition: background .2s, border-color .2s; }
.cm-piede .cm-social a:hover { border-color: var(--cm-bordeaux); background: var(--cm-bordeaux); }
.cm-piede .cm-social svg { width: 20px; height: 20px; }
.cm-piede-basso { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding-block: 22px 30px; border-top: 1px solid var(--cm-linea); font-size: 14px; }
.cm-piede-basso > * { margin: 0; }
/* Fra due righe meno spazio che fra due voci: sul telefono, dal 29/10/2026,
   «Preferenze cookie» va a capo, e diciotto pixel la staccavano dalle altre. */
.cm-legali { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.cm-legali a { color: var(--cm-tenue); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.cm-legali a:hover { color: var(--cm-bianco); }
/* In verticale — telefono e tablet — (utente, 26/10/2026 e 27/10/2026):
   Privacy e Cookie Policy sotto le icone dei social, al centro della loro
   fila; il copyright da solo nell'ultima riga, al centro. Conta il verso, non
   la larghezza. Le due voci stanno nel markup dentro `.cm-piede-basso`: con
   `display: contents` i due gruppi lasciano i loro pezzi alla griglia di
   `.cm-dentro`, che li mette al posto giusto senza toccare il pattern, e in
   orizzontale resta tutto com'era. */
@media (orientation: portrait) {
	.cm-piede .cm-dentro { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 30px; }
	.cm-piede .cm-dentro > .cm-piede-alto { grid-column: 1 / -1; }
	.cm-piede .cm-piede-centro, .cm-piede .cm-piede-basso { display: contents; }
	.cm-piede .cm-ente { grid-column: 1; grid-row: 2 / span 2; align-self: center; padding-block: 40px; }
	.cm-piede .cm-piede-contatti { grid-column: 2; grid-row: 2; align-self: end; margin: 40px 0 0; }
	/* ⚠️ Le note non allargano la colonna (29/10/2026): con «Preferenze
	   cookie» la loro fila è più larga dei social, e la colonna — con dentro la
	   Newsletter, larga quanto i social — si sarebbe allargata con lei. Vanno a
	   capo dentro quella misura, al centro. */
	.cm-piede .cm-legali { grid-column: 2; grid-row: 3; justify-self: center; justify-content: center; width: 0; min-width: 100%; align-self: start; margin: 18px 0 40px; }
	.cm-piede .cm-piede-basso > :first-child { grid-column: 1 / -1; grid-row: 4; padding-block: 22px 30px; border-top: 1px solid var(--cm-linea); font-size: 14px; text-align: center; }
}
/* Sul telefono una colonna sola: i dati dell'ente, poi newsletter e social al
   centro, sotto le due voci, e in fondo il copyright. */
@media (max-width: 699.95px) and (orientation: portrait) {
	.cm-piede .cm-dentro { grid-template-columns: minmax(0, 1fr); }
	.cm-piede .cm-ente { grid-row: 2; align-self: auto; padding-block: 40px 30px; }
	.cm-piede .cm-piede-contatti { grid-column: 1; grid-row: 3; justify-self: center; margin: 0; }
	.cm-piede .cm-legali { grid-column: 1; grid-row: 4; }
	.cm-piede .cm-piede-basso > :first-child { grid-row: 5; }
}

/* ─── CHI SIAMO ────────────────────────────────────────────────
   Approvata il 21/10/2026 (mockups-2026/chisiamo): la A1 con il movimento
   «Sipario». Le cose entrano scorrendo solo con `cm-js` sull'<html> (lo mette
   functions.php prima che la pagina si disegni); senza JavaScript, e
   nell'editor, si vede tutto subito e l'elenco dei componenti resta sotto la
   sua scheda. */
body .cm-apertura.cm-apertura-pagina { height: min(88svh, 860px); min-height: 560px; }
.cm-apertura-pagina .cm-filmato { background-position: 50% 40% !important; }

/* La storia: il testo comincia all'altezza della foto, e la foto è alta quanto
   il testo, così nessuno dei due lascia un vuoto sotto (utente, 21/10/2026). */
.cm-racconto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "capo ." "foto testo"; gap: 34px 80px; }
.cm-racconto > * { margin: 0; }
.cm-racconto-capo { grid-area: capo; }
.cm-racconto-capo > * { margin: 0; }
.cm-racconto h2.wp-block-heading { margin-top: 16px; font-size: clamp(40px, 4.6vw, 72px); line-height: .92; text-wrap: balance; }
.cm-racconto-foto { grid-area: foto; position: relative; min-height: 420px; overflow: hidden; border-radius: 15px; }
.cm-racconto-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.cm-racconto-testo { grid-area: testo; }
.cm-racconto-testo p { max-width: 62ch; margin: 0 0 22px; color: rgba(255, 255, 255, .86); font-size: 20px; line-height: 1.6; }
.cm-racconto-testo p:last-child { margin-bottom: 0; }
.cm-racconto-testo .cm-primo { margin-top: -.2em; color: var(--cm-bianco); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.35; }

/* La missione, sulla fascia bordeaux. */
body .cm-missione { background: var(--cm-bordeaux); }
.cm-missione .cm-dentro > * { margin: 0; }
.cm-missione .cm-occhiello::before { background: var(--cm-bianco); }
.cm-missione-griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 70px; }
.cm-missione .cm-dentro > .cm-missione-griglia { margin-top: 22px; }
.cm-missione-griglia > *, .cm-missione-resto > * { margin: 0; }
.cm-grande-testo { font-size: clamp(32px, 3.4vw, 52px); font-weight: 700; line-height: 1.08; }
.cm-missione-resto p { color: rgba(255, 255, 255, .9); font-size: 20px; line-height: 1.6; }
.cm-missione-resto > .cm-azioni { gap: 14px; margin-top: 34px; }
.cm-tasto-bianco .wp-block-button__link { background: var(--cm-bianco); color: var(--cm-bordeaux); }
.cm-tasto-bianco .wp-block-button__link:hover { background: #F4DDE1; }
.cm-tasto-vuoto .wp-block-button__link { background: transparent; color: var(--cm-bianco); box-shadow: inset 0 0 0 2px var(--cm-bianco); }
.cm-tasto-vuoto .wp-block-button__link:hover { background: var(--cm-bianco); color: var(--cm-bordeaux); }
/* La frase grande arriva parola per parola (sito.js la divide). */
.cm-parola { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: top; }
.cm-parola > span { display: inline-block; transition: transform .8s var(--cm-curva); transition-delay: calc(var(--cm-i, 0) * 32ms); }
.cm-js .cm-grande-testo:not(.cm-visto) .cm-parola > span { transform: translateY(105%); }

/* Le persone: una scheda sola per il team, il consiglio e il comitato.
   ⚠️ Il nome è `cm-persona-nome`, non `cm-nome`: quello è il nome verticale
   delle quinte del menù, e con la stessa classe i nomi uscivano in colonna. */
.cm-persona { margin: 0; }
.cm-persona > *, .cm-persona-info > * { margin: 0; }
.cm-persona-foto { position: relative; overflow: hidden; border-radius: 15px; isolation: isolate; }
.cm-persona-foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--cm-curva); }
.cm-persona:hover .cm-persona-foto img { transform: scale(1.05); }
.cm-persona-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cm-ruolo { color: var(--cm-rosa); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; }
.cm-persona h3.cm-persona-nome { font-size: 30px; line-height: 1.05; }
.cm-persona-info > .cm-bio { margin-top: 8px; }
.cm-bio a { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 2px solid var(--cm-bordeaux); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; transition: color .2s, gap .3s; }
.cm-bio a:hover { gap: 16px; color: var(--cm-rosa); }
/* Una «Biografia» ancora senza il suo file (27/10/2026: le righe ci sono, i PDF
   arrivano dopo): la stessa scrittura, senza il filetto e più chiara, perché
   non si apre. Collegato il file, prende da sola la veste di sopra. */
.cm-bio:not(:has(a)) { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--cm-tenue); }
.cm-team .cm-dentro > * { margin: 0; }
.cm-team .cm-dentro > h2.wp-block-heading { margin-bottom: 36px; }
.cm-coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.cm-coppia > .cm-persona { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 26px; }
.cm-coppia .cm-persona-info { padding-bottom: 6px; }
.cm-coppia .cm-persona h3.cm-persona-nome { font-size: clamp(30px, 2.8vw, 44px); }

/* Consiglio direttivo e comitato artistico: due schede, non due file di nomi
   («così la pagina non diventa molto lunga», utente, 21/10/2026). La scheda
   apre il suo elenco sopra la pagina, dietro un sipario (sito.js). */
body .cm-sezione.cm-organi-fascia { padding-top: 0; }
.cm-organi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.cm-organo { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; min-height: 460px; margin: 0; padding: 30px; overflow: hidden; border-radius: 15px; background: var(--cm-grafite); isolation: isolate; }
.cm-organo > * { margin: 0; }
.cm-organo > .cm-organo-foto { position: absolute; inset: 0; z-index: -3; }
.cm-organo-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(1.3); transition: transform 1.2s var(--cm-curva), filter .7s; }
.cm-organo::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg, var(--cm-bordeaux) 0%, rgba(155, 3, 37, .82) 100%); mix-blend-mode: multiply; transition: opacity .7s; pointer-events: none; }
.cm-organo:hover .cm-organo-foto img { transform: scale(1.05); filter: grayscale(.3) contrast(1.05) brightness(1.1); }
.cm-organo:hover::after { opacity: .6; }
.cm-organo h2.wp-block-heading.cm-organo-titolo { overflow: hidden; font-size: clamp(40px, 4.4vw, 72px); line-height: .9; }
.cm-organo-titolo > span { display: inline-block; transition: transform 1s .55s var(--cm-curva); }
.cm-quanti { position: absolute; top: 28px; left: 30px; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; }
.cm-organo-vedi { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; }
.cm-organo-apri { display: inline-flex; align-items: center; gap: 10px; padding: 0 0 4px; border: 0; border-bottom: 2px solid var(--cm-bianco); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: gap .3s; }
.cm-organo-apri::after { content: ""; position: absolute; inset: 0; }
.cm-organo-apri:focus-visible { outline: none; }
.cm-organo:has(.cm-organo-apri:focus-visible) { outline: 2px solid var(--cm-rosa); outline-offset: 4px; }
.cm-organo:hover .cm-organo-apri { gap: 16px; }
/* Senza JavaScript (e nell'editor) l'elenco resta dentro la sua scheda, sotto. */
.cm-organo > .cm-componenti { align-self: stretch; margin: 18px -30px -30px; padding: 4px 30px 10px; background: var(--cm-nero); }
.cm-organo > .cm-componenti { grid-template-columns: minmax(0, 1fr); }
.cm-organo > .cm-componenti > .cm-persona { grid-template-columns: 104px minmax(0, 1fr); }
.cm-js .cm-organo > .cm-componenti { display: none; }

/* L'elenco dei componenti: le stesse schede, tre per riga. */
.cm-componenti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 34px; border-top: 1px solid var(--cm-linea); }
.cm-componenti > .cm-persona { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--cm-linea); }
.cm-componenti .cm-persona-foto img { aspect-ratio: 1 / 1; }
.cm-componenti .cm-persona h3.cm-persona-nome { font-size: 24px; }

/* Il sipario: i teli calano, il palco si accende dietro di loro, i teli
   risalgono; «Chiudi» ed Esc rifanno lo stesso al contrario. */
.cm-sipario-elenco { position: fixed; top: var(--cm-barra); right: 0; bottom: 0; left: 0; z-index: 80; }
.cm-sipario-elenco[hidden] { display: none; }
.cm-palco { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--cm-nero); opacity: 0; }
.cm-sipario-elenco.cm-su .cm-palco { opacity: 1; }
.cm-palco .cm-dentro { padding-block: max(40px, env(safe-area-inset-top, 0px)) 80px; }
.cm-capo-componenti { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.cm-capo-componenti h2 { margin: 16px 0 0; font-size: clamp(44px, 7vw, 110px); line-height: .88; text-transform: uppercase; }
.cm-chiudi { display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 24px; border: 0; border-radius: 15px; background: var(--cm-bordeaux); color: var(--cm-bianco); font: 700 15px/1 var(--cm-font); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.cm-chiudi span { font-size: 24px; font-weight: 400; letter-spacing: 0; }
.cm-chiudi:hover { background: var(--cm-bordeaux-scuro); }
.cm-tende { position: absolute; inset: 0; display: flex; pointer-events: none; }
.cm-tende i { flex: 1; background: var(--cm-nero); }
.cm-tende i:nth-child(2) { --cm-t: 1; } .cm-tende i:nth-child(3) { --cm-t: 2; } .cm-tende i:nth-child(4) { --cm-t: 3; } .cm-tende i:nth-child(5) { --cm-t: 4; }
.cm-sipario-elenco .cm-tende i { background: var(--cm-bordeaux); transform: translateY(-101%); transition: transform .7s cubic-bezier(.77, 0, .18, 1); transition-delay: calc(var(--cm-t, 0) * 55ms); }
.cm-sipario-elenco.cm-cala .cm-tende i { transform: none; transition-duration: .55s; }

/* Ciò che entra scorrendo sale e compare, uno dopo l'altro (--cm-i è il suo
   posto nella fila); le foto si scoprono da sotto un velo bordeaux; sulle
   schede si alzano i teli. */
.cm-js :is(.cm-racconto-capo > *, .cm-racconto-foto, .cm-racconto-testo > *, .cm-missione .cm-occhiello, .cm-missione-resto, .cm-team .cm-dentro > h2.wp-block-heading, .cm-coppia > .cm-persona, .cm-componenti > .cm-persona) { transition: opacity .8s var(--cm-curva), transform .9s var(--cm-curva); transition-delay: calc(var(--cm-i, 0) * 90ms); }
.cm-js :is(.cm-racconto-capo > *, .cm-racconto-foto, .cm-racconto-testo > *, .cm-missione .cm-occhiello, .cm-missione-resto, .cm-team .cm-dentro > h2.wp-block-heading, .cm-coppia > .cm-persona, .cm-componenti > .cm-persona):not(.cm-visto) { opacity: 0; transform: translateY(28px); }
.cm-persona-foto::after, .cm-racconto-foto::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--cm-bordeaux); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1s cubic-bezier(.77, 0, .18, 1); transition-delay: calc(var(--cm-i, 0) * 110ms + .15s); pointer-events: none; }
.cm-racconto-foto::after { transition-delay: .35s; }
.cm-js .cm-persona:not(.cm-visto) .cm-persona-foto::after, .cm-js .cm-racconto-foto:not(.cm-visto)::after { transform: none; }
.cm-js .cm-persona .cm-persona-foto img { transition: transform 1.6s var(--cm-curva); transition-delay: calc(var(--cm-i, 0) * 110ms + .15s); }
.cm-js .cm-persona:not(.cm-visto) .cm-persona-foto img { transform: scale(1.2); }
.cm-js .cm-persona.cm-visto:hover .cm-persona-foto img { transform: scale(1.05); transition-delay: 0s; transition-duration: .8s; }
.cm-organo .cm-tende { z-index: 1; }
.cm-organo .cm-tende i { transition: transform 1s cubic-bezier(.77, 0, .18, 1); transition-delay: calc(var(--cm-t, 0) * 70ms); }
.cm-organi > .cm-organo:nth-child(2) .cm-tende i { transition-delay: calc(var(--cm-t, 0) * 70ms + .18s); }
.cm-organo.cm-visto .cm-tende i { transform: translateY(-101%); }
.cm-js .cm-organo:not(.cm-visto) .cm-organo-foto img { transform: scale(1.18); }
.cm-js .cm-organo:not(.cm-visto) .cm-organo-titolo > span { transform: translateY(105%); }
.cm-js :is(.cm-quanti, .cm-organo-vedi) { transition: opacity .8s .9s; }
.cm-js .cm-organo:not(.cm-visto) :is(.cm-quanti, .cm-organo-vedi) { opacity: 0; }

/* La Home come «Chi siamo» (22/10/2026): le stesse due mosse — sale e compare,
   uno dopo l'altro; le foto si scoprono da sotto il velo bordeaux. */
.cm-js :is(.cm-sezione:not(.cm-team) .cm-dentro > h2.wp-block-heading, .cm-sfoglia, .cm-storia > .wp-block-image, .cm-storia-testo > *, .cm-video-scheda, .cm-citazione cite, .cm-newsletter .cm-dentro > .cm-occhiello, .cm-riga-newsletter > *, .cm-griglia-sostegno > .cm-voce, .cm-loghi > .cm-gruppo-loghi) { transition: opacity .8s var(--cm-curva), transform .9s var(--cm-curva); transition-delay: calc(var(--cm-i, 0) * 90ms); }
.cm-js :is(.cm-sezione:not(.cm-team) .cm-dentro > h2.wp-block-heading, .cm-sfoglia, .cm-storia > .wp-block-image, .cm-storia-testo > *, .cm-video-scheda, .cm-citazione cite, .cm-newsletter .cm-dentro > .cm-occhiello, .cm-riga-newsletter > *, .cm-griglia-sostegno > .cm-voce, .cm-loghi > .cm-gruppo-loghi):not(.cm-visto) { opacity: 0; transform: translateY(28px); }
.cm-js .cm-citazione cite { transition-delay: .5s; }
/* La citazione parola per parola, come la frase della missione. */
.cm-js .cm-citazione > p:not(.cm-visto) .cm-parola > span { transform: translateY(105%); }
/* Il velo: sulle locandine, sulla foto della storia e sul video. */
.cm-storia > .wp-block-image, .cm-video-scheda { position: relative; overflow: hidden; border-radius: 15px; }
:is(.cm-storia > .wp-block-image, .cm-video-scheda)::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--cm-bordeaux); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1s cubic-bezier(.77, 0, .18, 1); transition-delay: calc(var(--cm-i, 0) * 110ms + .15s); pointer-events: none; }
.cm-js :is(.cm-storia > .wp-block-image:not(.cm-visto), .cm-video-scheda:not(.cm-visto))::after { transform: none; }
.cm-js .cm-storia > .wp-block-image img { transition: transform 1.6s var(--cm-curva); transition-delay: .15s; }
.cm-js .cm-storia > .wp-block-image:not(.cm-visto) img { transform: scale(1.2); transition-duration: 1.6s; }

/* ─── LA MODULISTICA (24/10/2026) ──────────────────────────────
   La D dei mockup: niente foto, le schede di Trasparenza con un'icona
   disegnata. Si muove come «Chi siamo»: il titolo sale, le schede salgono
   una dopo l'altra, l'icona si disegna e le voci entrano di lato. */
.cm-mo-apertura { padding: calc(var(--cm-alta) + 90px) 0 70px; border-bottom: 1px solid var(--cm-linea); }
.cm-mo-apertura .cm-titolo { margin: 16px 0 0; font-size: clamp(56px, 9vw, 150px); font-weight: 700; line-height: .86; text-transform: uppercase; }
.cm-mo-apertura .cm-titolo .cm-riga > span { animation-delay: .25s; }
.cm-mo-apertura .cm-occhiello { opacity: 0; animation: cm-compare .8s .05s forwards; }
.cm-mo-sotto { margin: 26px 0 0; color: rgba(255, 255, 255, .86); font-size: 22px; opacity: 0; animation: cm-compare .8s .7s forwards; }
.cm-mo-fascia { padding-block: 96px; }
.cm-mo-schede { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cm-mo-scheda { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 30px 30px 28px; border-radius: 15px; background: var(--cm-grafite); box-shadow: inset 0 3px 0 var(--cm-bordeaux); transition: opacity .8s var(--cm-curva), transform .9s var(--cm-curva), box-shadow .4s; transition-delay: calc(var(--cm-i, 0) * 140ms); }
.cm-mo-scheda.cm-visto:hover { transform: translateY(-4px); box-shadow: inset 0 3px 0 var(--cm-bordeaux), 0 22px 44px rgba(0, 0, 0, .38); transition-delay: 0s; }
.cm-js .cm-mo-scheda:not(.cm-visto) { opacity: 0; transform: translateY(34px); }
.cm-mo-icona { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 6px; border: 1px solid var(--cm-linea); border-radius: 15px; background: rgba(155, 3, 37, .14); color: var(--cm-rosa); }
.cm-mo-icona svg { width: 48px; height: 48px; overflow: visible; }
/* L'icona si disegna: ogni tratto ha lunghezza 1 (pathLength) e si scopre. */
.cm-mo-icona :is(path, circle, rect) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--cm-curva); transition-delay: calc(var(--cm-i, 0) * 140ms + .35s); }
.cm-js .cm-mo-scheda:not(.cm-visto) .cm-mo-icona :is(path, circle, rect) { stroke-dashoffset: 1; }
.cm-mo-gira { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--cm-curva); }
.cm-mo-scheda:hover .cm-mo-gira { transform: rotate(90deg); }
.cm-mo-scheda:nth-child(2):hover .cm-mo-gira { transform: rotate(-300deg); }
.cm-mo-per { color: var(--cm-rosa); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; }
.cm-mo-scheda h2 { margin: -8px 0 0; font-size: 38px; line-height: 1; text-transform: uppercase; }
.cm-mo-serve { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-block: 1px solid var(--cm-linea); }
.cm-mo-etichetta { color: var(--cm-tenue); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
.cm-mo-serve ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cm-mo-serve li { font-size: 19px; line-height: 1.3; transition: opacity .6s var(--cm-curva), transform .7s var(--cm-curva); transition-delay: calc(var(--cm-i, 0) * 140ms + .55s + var(--cm-v, 0) * 90ms); }
.cm-mo-serve li::before { content: ""; display: inline-block; width: 18px; height: 3px; margin: 0 12px 5px 0; background: var(--cm-bordeaux); vertical-align: middle; }
.cm-js .cm-mo-scheda:not(.cm-visto) .cm-mo-serve li { opacity: 0; transform: translateX(-14px); }
.cm-mo-tasto { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; height: 56px; margin-top: auto; padding: 0 26px; border-radius: 15px; background: var(--cm-bordeaux); color: var(--cm-bianco); font-size: 15px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: background .2s; }
.cm-mo-tasto svg { width: 18px; height: 18px; transition: transform .3s var(--cm-curva); }
.cm-mo-tasto:hover { background: var(--cm-bordeaux-scuro); color: var(--cm-bianco); }
.cm-mo-tasto:hover svg { transform: translateX(4px); }

/* Il dialogo del numero, prima dell'iscrizione. */
.cm-mo-velo { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(13, 13, 13, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: cm-compare .3s ease both; }
.cm-mo-velo[hidden] { display: none; }
.cm-mo-dialogo { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 34px 32px 26px; border: 1px solid var(--cm-linea); border-radius: 15px; background: var(--cm-grafite); animation: cm-mo-dentro .45s var(--cm-curva) both; }
@keyframes cm-mo-dentro { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.cm-mo-chiudi { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--cm-linea); border-radius: 50%; background: transparent; color: var(--cm-bianco); font: 400 26px/1 var(--cm-font); cursor: pointer; transition: border-color .2s, transform .3s var(--cm-curva); }
.cm-mo-chiudi:hover { border-color: var(--cm-bianco); transform: rotate(90deg); }
.cm-mo-occhiello { padding-right: 52px; }
.cm-mo-dialogo h2 { margin: 14px 0 0; padding-right: 48px; font-size: 34px; line-height: .95; text-transform: uppercase; }
.cm-mo-riga { margin: 12px 0 24px; color: rgba(255, 255, 255, .7); font-size: 17px; line-height: 1.45; }
.cm-mo-campo { display: block; }
.cm-mo-campo > span { display: block; margin-bottom: 8px; color: rgba(255, 255, 255, .7); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.cm-mo-campo i { font-style: normal; color: var(--cm-rosa); }
.cm-mo-campo input { display: block; width: 100%; height: 50px; padding: 0 18px; border: 1px solid var(--cm-linea); border-radius: 15px; background: var(--cm-nero); color: var(--cm-bianco); font: 400 17px/1.3 var(--cm-font); letter-spacing: .16em; text-transform: uppercase; color-scheme: dark; outline: none; transition: border-color .2s, box-shadow .2s; }
.cm-mo-campo input::placeholder { color: rgba(255, 255, 255, .35); letter-spacing: .04em; text-transform: none; }
.cm-mo-campo input:focus { border-color: var(--cm-bianco); box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }
.cm-mo-campo input[aria-invalid="true"] { border-color: var(--cm-rosa); }
.cm-mo-errore { margin: 8px 0 0; color: var(--cm-rosa); font-size: 14px; line-height: 1.4; }
.cm-mo-errore::before { content: "! "; font-weight: 700; }
.cm-mo-continua { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 56px; margin-top: 20px; border: 0; border-radius: 15px; background: var(--cm-bordeaux); color: var(--cm-bianco); font: 700 16px/1 var(--cm-font); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.cm-mo-continua svg { width: 18px; height: 18px; }
.cm-mo-continua:hover:not(:disabled) { background: var(--cm-bordeaux-scuro); }
.cm-mo-continua:disabled { opacity: .6; cursor: progress; }
.cm-mo-senza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--cm-linea); }
.cm-mo-senza p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 17px; }
.cm-mo-senza a { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--cm-bordeaux); color: var(--cm-bianco); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: border-color .2s, gap .3s var(--cm-curva); }
.cm-mo-senza a svg { width: 16px; height: 16px; }
.cm-mo-senza a:hover { border-color: var(--cm-bianco); gap: 12px; }

@media (max-width: 900px) {
	.cm-mo-apertura { padding: calc(var(--cm-alta) + 50px) 0 50px; }
	.cm-mo-apertura .cm-titolo { font-size: clamp(40px, 11.5vw, 150px); }
	.cm-mo-sotto { font-size: 19px; }
	.cm-mo-fascia { padding-block: 64px; }
	.cm-mo-schede { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.cm-mo-scheda { padding: 26px 22px 24px; }
	.cm-mo-scheda h2 { font-size: 32px; }
	.cm-mo-tasto { align-self: stretch; justify-content: center; }
}
@media (max-width: 560px) {
	.cm-mo-dialogo { padding: 30px 20px 22px; }
}

@media (max-width: 900px) {
	body .cm-apertura.cm-apertura-pagina { height: 78svh; min-height: 520px; }
	.cm-racconto { grid-template-columns: minmax(0, 1fr); grid-template-areas: "capo" "foto" "testo"; gap: 26px; }
	/* La foto è verticale e le teste stanno in alto: tagliata a 4:3 dal centro
	   le perdeva (utente, 21/10/2026). Si tiene la parte di sopra. */
	.cm-racconto-foto { min-height: 0; aspect-ratio: 4 / 3; }
	.cm-racconto-foto img { object-position: 50% 12%; }
	.cm-racconto-testo .cm-primo { margin-top: 8px; }
	.cm-missione-griglia { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.cm-persona h3.cm-persona-nome, .cm-componenti .cm-persona h3.cm-persona-nome { font-size: 22px; }
	.cm-coppia { grid-template-columns: minmax(0, 1fr); }
	.cm-coppia > .cm-persona { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; }
	.cm-organi { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.cm-organo { min-height: 300px; padding: 22px 20px; }
	.cm-organo > .cm-componenti { margin: 18px -20px -22px; padding-inline: 20px; }
	.cm-quanti { top: 20px; left: 20px; }
	.cm-componenti { grid-template-columns: minmax(0, 1fr); }
	.cm-componenti > .cm-persona { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
	.cm-capo-componenti { flex-direction: column-reverse; align-items: flex-start; }
	.cm-chiudi { align-self: flex-end; height: 48px; padding: 0 18px; }
}
@media (max-width: 560px) {
	.cm-azioni .wp-block-button { width: 100%; }
	.cm-azioni .wp-block-button__link { justify-content: center; width: 100%; }
}

/* ─── LE ALTRE PAGINE ──────────────────────────────────────── */
/* Una pagina che non comincia con l'apertura scende sotto la testata. */
.cm-principale.cm-piena:not(:has(> .wp-block-post-content > .wp-block-contrametric-apertura:first-child)) { padding-top: var(--cm-alta); }
body .cm-pagina { padding-block: calc(var(--cm-alta) + 56px) 96px; }
.cm-pagina .cm-titolo-pagina { margin: 0 0 40px; font-size: var(--wp--preset--font-size--titolo); line-height: .9; }
.cm-pagina .wp-block-post-content a:not(.wp-element-button) { text-decoration: underline; text-decoration-color: var(--cm-bordeaux); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cm-elenco .wp-block-post { padding-block: 26px; border-top: 1px solid var(--cm-linea); }
.cm-elenco .wp-block-post-title { margin: 0; font-size: 32px; }
.cm-elenco .wp-block-post-date { color: var(--cm-rosa); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }

/* ─── LA PARETE DELLE FOTO ────────────────────────────────────
   La pagina «Foto», variante B4 (utente, 23/10/2026): il titolo fermo al
   centro, le foto in colonne che gli salgono davanti ognuna alla sua velocità
   (le compone e le sposta sito.js). In bianco e nero, a colori passandoci
   sopra; sul telefono, arrivando al centro dello schermo (.cm-qui). */
.cm-parete-foto { position: relative; isolation: isolate; overflow: hidden; padding: 20px var(--cm-gutter-r) 140px var(--cm-gutter); }
.cm-parete-titolo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cm-parete-fermo { position: sticky; top: calc(var(--cm-alta) + var(--cm-barra) + 8svh); display: grid; justify-items: center; gap: 18px; padding-inline: var(--cm-gutter) var(--cm-gutter-r); text-align: center; }
.cm-parete-fermo .cm-titolo { margin: 0; font-size: clamp(110px, 24vw, 400px); line-height: .84; text-transform: uppercase; }
.cm-parete-fermo .cm-sotto { max-width: 34ch; margin: 0; color: rgba(255, 255, 255, .86); font-size: 22px; line-height: 1.4; }
.cm-parete-foto:not(.cm-parete-editor) .cm-titolo .cm-riga > span { animation-delay: .4s; }
.cm-parete-foto:not(.cm-parete-editor) :is(.cm-occhiello, .cm-sotto) { opacity: 0; animation: cm-compare .8s .9s forwards; }
.cm-colonne { display: grid; grid-template-columns: repeat(var(--cm-n, 1), minmax(0, 1fr)); gap: 16px; align-items: start; max-width: 1440px; margin-inline: auto; padding-top: 64svh; }
.cm-colonna { display: flex; flex-direction: column; gap: 16px; will-change: transform; }
/*
 * La parete scorre con il browser, non con lo script (28/10/2026). Utente, con
 * un video dal telefono: «quando si scrolla la fila di destra ha un lag
 * importante». Lo scarto di ogni colonna lo calcolava `sito.js` a ogni
 * scorrimento, ma sul telefono lo scorrimento lo fa il sistema senza aspettare
 * la pagina: la colonna arrivava sempre un fotogramma dopo, a scatti. Qui lo
 * calcola il browser insieme allo scorrimento (`animation-timeline`), con lo
 * stesso conto: da quando la parete entra dal fondo dello schermo (`cover 0%`)
 * a quando la sua fine arriva al fondo (`exit 0%`), lo scarto va da zero a
 * `--cm-scarto`, che `sito.js` misura una volta. Dove il browser non lo sa
 * fare, `cm-parete-css` non c'è e resta lo script.
 */
.cm-parete-css { view-timeline: --cm-parete block; }
.cm-parete-css .cm-colonna { animation: cm-parete linear both; animation-timeline: --cm-parete; animation-range: cover 0% exit 0%; }
@keyframes cm-parete { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--cm-scarto, 0px), 0); } }

.cm-scatto { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 15px; overflow: hidden; background: var(--cm-grafite); color: var(--cm-bianco); cursor: zoom-in; isolation: isolate; }
.cm-scatto img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.08) brightness(.92); transform: scale(1.02); transition: filter .7s var(--cm-curva), transform 1.4s var(--cm-curva); }
.cm-scatto:hover img, .cm-scatto:focus-visible img, .cm-scatto.cm-qui img { filter: none; transform: scale(1.07); }
/* Il filetto bordeaux in fondo, come sotto «Coming soon». */
.cm-scatto::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 4px; background: var(--cm-bordeaux); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--cm-curva); }
.cm-scatto:hover::before, .cm-scatto:focus-visible::before, .cm-scatto.cm-qui::before { transform: none; }
/* La lente: dice che la foto si apre. */
.cm-lente { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 15px; background: rgba(13, 13, 13, .55); backdrop-filter: blur(6px); opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .5s var(--cm-curva); }
.cm-scatto:hover .cm-lente, .cm-scatto:focus-visible .cm-lente { opacity: 1; transform: none; }
/* Niente velo bordeaux sulle foto (utente, 28/10/2026: «togli i veli dalle
   foto nella pagina Foto»): scorrendo, sul telefono, le foto arrivavano
   coperte da riquadri bordeaux che si alzavano a ondate. Le foto di «Chi
   siamo» il loro velo lo tengono. */

/* La foto grande: senza sipario (utente, 23/10/2026). Il fondo si scurisce e
   la foto arriva ingrandendosi appena. Sta sopra la testata e sopra la barra
   di WordPress di chi è entrato. */
.cm-foto-grande { position: fixed; inset: 0; z-index: 100000; visibility: hidden; }
.cm-foto-grande.cm-aperta { visibility: visible; }
.cm-foto-grande-palco { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; padding: max(20px, env(safe-area-inset-top, 0px)) var(--cm-gutter-r) max(20px, env(safe-area-inset-bottom, 0px)) var(--cm-gutter); background: var(--cm-nero); color: var(--cm-bianco); opacity: 0; transition: opacity .25s var(--cm-curva); }
.cm-foto-grande.cm-su .cm-foto-grande-palco { opacity: 1; }
.cm-foto-grande-alto { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cm-foto-grande-comandi { display: flex; align-items: center; gap: 10px; }
.cm-foto-grande-tasto:disabled { cursor: default; opacity: .7; }
.cm-foto-grande-numero { font-size: 15px; letter-spacing: .24em; text-transform: uppercase; color: var(--cm-tenue); }
.cm-foto-grande-numero b { color: var(--cm-bianco); }
.cm-foto-grande figure { display: grid; place-items: center; min-height: 0; margin: 0; transform: scale(.96); transition: transform .35s var(--cm-curva); }
.cm-foto-grande.cm-su figure { transform: none; }
.cm-foto-grande figure img { max-width: 100%; max-height: calc(100svh - 190px); width: auto; height: auto; border-radius: 15px; object-fit: contain; transition: opacity .35s, transform .5s var(--cm-curva); }
.cm-foto-grande figure img.cm-cambia { opacity: 0; transform: translateX(var(--cm-dx, 30px)); }
.cm-foto-grande-basso { display: flex; align-items: center; justify-content: center; gap: 14px; }
.cm-foto-grande-tasto { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 54px; min-width: 54px; padding: 0 22px; border: 0; border-radius: 15px; background: var(--cm-bordeaux); color: var(--cm-bianco); font: 700 15px/1 var(--cm-font); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .2s, box-shadow .2s; }
.cm-foto-grande-tasto:hover { background: var(--cm-bordeaux-scuro); }
.cm-foto-grande-tasto.cm-vuoto { background: transparent; box-shadow: inset 0 0 0 1px var(--cm-linea); }
.cm-foto-grande-tasto.cm-vuoto:hover { box-shadow: inset 0 0 0 1px var(--cm-bianco); }
.cm-foto-grande-tasto span[aria-hidden="true"] { font-size: 24px; font-weight: 400; letter-spacing: 0; }

/* ─── EDITOR ───────────────────────────────────────────────── */
/* La testata nell'editor: una fascia ferma, non fissa in cima. */
.cm-testata-editor { display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--cm-linea); background: var(--cm-nero); color: var(--cm-bianco); }
.cm-testata-editor__marchio { width: 48px; height: 48px; background: url("../img/marchio.png") center / contain no-repeat; }
.cm-testata-editor__nome { color: var(--cm-tenue); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.cm-testata-editor__tasto { display: flex; align-items: center; height: 40px; margin-left: auto; padding: 0 18px; border-radius: 15px; background: var(--cm-bordeaux); font-size: 14px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
/* L'apertura nell'editor: la copertina al posto del video, il testo in fondo. */
.cm-apertura.cm-apertura-editor { display: flex; align-items: flex-end; height: auto; min-height: 640px; background-position: center; background-size: cover; }
.cm-apertura-editor .cm-apertura-contenuto { position: relative; width: 100%; }
.is-root-container > .cm-sezione, .is-root-container > .wp-block-contrametric-apertura { margin-block: 0; }
/* La parete nell'editor: il titolo com'è, sotto le foto scelte in miniatura. */
.cm-parete-editor { padding-block: 60px; }
.cm-parete-editor .cm-parete-fermo { position: static; }
.cm-parete-scelta { display: grid; gap: 14px; max-width: 1440px; margin: 40px auto 0; }
.cm-parete-quante { margin: 0; color: var(--cm-tenue); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; }
.cm-parete-miniature { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cm-parete-miniature img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; filter: grayscale(1); }

/* ─── TELEFONO E TABLET ────────────────────────────────────── */
@media (max-width: 900px) {
	.cm-parete-foto { padding-bottom: 110px; }
	.cm-colonne, .cm-colonna { gap: 10px; }
	.cm-colonne { padding-top: 56svh; }
	.cm-parete-fermo .cm-sotto { font-size: 19px; }
	.cm-lente { display: none; }
	.cm-foto-grande-tasto { height: 48px; min-width: 48px; padding: 0 16px; font-size: 14px; }
	:root { --cm-alta: 68px; }
	.cm-apri { min-width: 0; height: 48px; padding: 0 18px; }
	.cm-apertura .cm-filmato { object-position: 38% 45%; }
	.cm-apertura-contenuto { grid-template-columns: minmax(0, 1fr); padding-bottom: 36px; }
	body .cm-sezione { padding-block: 72px; }
	body .cm-storia-fascia { padding-top: 20px; padding-bottom: 8px; }
	/* In programma: il cartellone diventa un tasto sotto le locandine. */
	.cm-programma .cm-dentro { grid-template-columns: minmax(0, 1fr); }
	.cm-programma .cm-sfoglia { grid-column: 1; grid-row: 3; margin: 34px 0 0; text-align: center; }
	.cm-sfoglia a { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 28px; border: 2px solid var(--cm-bordeaux); border-radius: 15px; background: var(--cm-nero); color: var(--cm-bianco); font-size: 15px; font-weight: 700; letter-spacing: .18em; }
	.cm-sfoglia a::after { content: "→"; }
	.cm-sfoglia a:hover { background: var(--cm-bordeaux); color: var(--cm-bianco); }
	/*
	 * Le quinte diventano righe, e quella toccata si apre crescendo (disegno
	 * «Proposta» approvato il 27/10/2026): la riga si allarga mentre quella di
	 * prima si chiude, un telo bordeaux scopre la locandina, i testi salgono uno
	 * dopo l'altro e lo sfondo sfocato si muove piano. Le righe entrano da
	 * destra quando la sezione arriva in vista: la tenda bordeaux d'entrata
	 * resta del computer.
	 * ⚠️ L'altezza cresce con `grid-template-rows` da 0fr a 1fr: l'unico figlio
	 * nel flusso è `.cm-vq-dentro`, tutto il resto è posato sopra. E il suo
	 * margine interno in alto e in basso nasce a zero, o la riga chiusa non
	 * potrebbe scendere sotto i 32 px che quel margine pretende.
	 */
	.cm-vetrina { flex-direction: column; height: auto; overflow-x: clip; }
	.cm-vq { flex: none; display: grid; grid-template-rows: 0fr; min-height: 92px; transition: grid-template-rows .85s cubic-bezier(.77, 0, .18, 1), transform .9s cubic-bezier(.77, 0, .18, 1); transition-delay: 0s, calc(var(--cm-i, 0) * 80ms); }
	.cm-vq.cm-vq-aperta { grid-template-rows: 1fr; }
	.cm-js .cm-vetrina:not(.cm-visto) .cm-vq { transform: translateX(110%); }
	.cm-vq::after { display: none; }
	.cm-vq.cm-vq-aperta .cm-vq-fondo { animation: cm-deriva 9s ease-in-out 1s infinite alternate; }
	.cm-vq-chiusa { bottom: auto; height: 92px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 0 18px; transition: opacity .3s, transform .45s var(--cm-curva); }
	.cm-vq.cm-vq-aperta .cm-vq-chiusa { transform: translateY(-16px); }
	.cm-vq-data { grid-template-columns: auto auto; align-items: baseline; gap: 8px; }
	.cm-vq-data b { font-size: 44px; }
	.cm-vq-nome { min-width: 0; max-height: none; writing-mode: horizontal-tb; transform: none; font-size: 22px; white-space: nowrap; text-overflow: ellipsis; }
	.cm-vq-dentro { position: relative; min-height: 0; overflow: hidden; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 18px; padding: 0 16px; opacity: 1; transition: padding .85s cubic-bezier(.77, 0, .18, 1); }
	.cm-vq.cm-vq-aperta .cm-vq-dentro { padding: 16px; transition: padding .85s cubic-bezier(.77, 0, .18, 1); }
	.cm-vq-loc { display: block; position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); transform: translateY(30px) scale(.94); transition: transform 1s var(--cm-curva) .2s; }
	.cm-vq.cm-vq-aperta .cm-vq-loc { transform: none; }
	.cm-vq-loc::after { content: ""; position: absolute; inset: 0; background: var(--cm-bordeaux); transform-origin: 50% 0; }
	.cm-vq.cm-vq-aperta .cm-vq-loc::after { transform: scaleY(0); transition: transform .9s cubic-bezier(.77, 0, .18, 1) .35s; }
	.cm-vq-dentro img { width: 100%; height: auto; border-radius: 0; box-shadow: none; transform: scale(1.15); transition: transform 1.6s var(--cm-curva) .2s; }
	.cm-vq.cm-vq-aperta .cm-vq-dentro img { transform: none; }
	.cm-vq-testo, .cm-vq.cm-vq-aperta .cm-vq-testo { transform: none; }
	.cm-vq-testo > * { opacity: 0; transform: translateY(18px); transition: opacity .2s, transform .2s; }
	.cm-vq.cm-vq-aperta .cm-vq-testo > * { opacity: 1; transform: none; transition: opacity .5s, transform .7s var(--cm-curva); }
	.cm-vq.cm-vq-aperta .cm-vq-testo > :nth-child(1) { transition-delay: .55s; }
	.cm-vq.cm-vq-aperta .cm-vq-testo > :nth-child(2) { transition-delay: .62s; }
	.cm-vq.cm-vq-aperta .cm-vq-testo > :nth-child(3) { transition-delay: .69s; }
	.cm-vq.cm-vq-aperta .cm-vq-testo > :nth-child(4) { transition-delay: .76s; }
	.cm-vq.cm-vq-aperta .cm-vq-testo > :nth-child(5) { transition-delay: .83s; }
	.cm-storia { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.cm-storia p:not(.cm-occhiello) { max-width: none; }
	.cm-griglia-sostegno { grid-template-columns: 1fr 1fr; }
	.cm-griglia-sostegno > .cm-voce, .cm-griglia-sostegno > .cm-voce + .cm-voce { padding-left: 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .35); }
	.cm-griglia-sostegno > .cm-voce:first-child { grid-column: 1 / -1; }
	.cm-endorsement-griglia { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.cm-citazione::before { height: 40px; font-size: 100px; }
	.cm-play { top: 10px; right: 10px; justify-content: center; width: 50px; height: 50px; padding: 0 0 0 4px; }
	.cm-play span { display: none; }
	body .cm-sostenitori { padding-block: 64px; }
	.cm-pannello { grid-template-columns: minmax(0, 1fr); }
	.cm-pannello > .cm-gruppo-loghi, .cm-pannello > .cm-gruppo-loghi:nth-child(n) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); grid-template-areas: "titolo" "loghi" "piu"; padding: 22px 22px 24px; border-top: 1px solid #E2E2E2; border-left: 0; }
	.cm-pannello > .cm-gruppo-loghi:first-child { border-top: 0; }
	.cm-gruppo-loghi > h3.wp-block-heading { margin-bottom: 16px; }
	.cm-gruppo-loghi > .cm-loghi { gap: 14px 22px; }
	.cm-loghi img { height: calc(var(--h, 40px) * .82) !important; }
	/* «Scopri di più» scende di una riga, a destra, e resta com'è sul computer:
	   la scritta con il filetto bordeaux sotto, non un tasto (utente, 29/10/2026). */
	.cm-gruppo-loghi > .cm-piu { justify-self: end; margin-top: 20px; }
	.cm-gruppo-loghi:has(> .cm-piu) > .cm-loghi { justify-content: space-between; gap: 18px 14px; }
	.cm-piede .cm-cerca, .cm-piede .cm-mappa { flex-basis: 100%; }
	.cm-piede-contatti { margin-inline: auto; }
	.cm-piede .cm-social { justify-content: center; }
	.cm-ente { align-items: flex-start; }
	.cm-ente .wp-block-image img { width: 64px; height: 64px; }
}
/* Il menù in colonna: sui telefoni, sui tablet e sugli schermi bassi. */
@media (max-width: 900px), (max-height: 560px) {
	.cm-file { flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
	.cm-quinta, .cm-quinta.cm-attiva { flex: 1 0 auto; min-height: 84px; }
	.cm-nome { top: 50%; bottom: auto; left: 22px; writing-mode: horizontal-tb; transform: translateY(-50%); font-size: 32px; }
	.cm-voci-q { display: none; }
	.cm-quinta.cm-attiva .cm-voci-q { position: relative; left: auto; right: auto; bottom: auto; display: block; padding: 22px 20px 18px; }
	.cm-voci-q h3 { margin-bottom: 8px; font-size: 34px; }
	.cm-voci-q a { padding: 6px 0; font-size: 20px; }
}
@media (max-height: 560px) {
	.cm-quinta, .cm-quinta.cm-attiva { min-height: 52px; }
	.cm-nome { left: 22px; font-size: 24px; }
	/* La parete delle foto su un telefono girato (25/10/2026): il titolo si
	   misura sulla larghezza e le foto partono a una frazione dell'altezza, e
	   con 852 × 393 la prima foto copriva metà di «FOTO» prima ancora di
	   scorrere. Qui il titolo si misura sull'altezza, sale verso la testata,
	   e le foto spuntano subito sotto la riga che lo accompagna, come in
	   verticale — misurato a 393 e a 330, l'altezza che resta con le barre di
	   Safari. */
	.cm-parete-fermo { top: 4svh; }
	.cm-parete-fermo .cm-titolo { font-size: clamp(64px, 30svh, 400px); }
	.cm-colonne { padding-top: 66svh; }
}
@media (max-width: 600px) {
	.cm-coming-soon .cm-prossimo:nth-of-type(n+2) { display: none; }
	.cm-sfoglia a { display: flex; }
	/* I partner sul telefono: grandi come i loghi «Con il contributo di», e in
	   due file — le prime due voci sopra, le altre sotto (utente, 30/10/2026:
	   «CTA BPER / Giobert, Duparc, Whiteready»). La riga vuota che va a capo è
	   `::after`; lo spazio fra le file lo mette la seconda, una volta sola. */
	.cm-gruppo-loghi:has(> .cm-piu) > .cm-loghi { row-gap: 0; }
	.cm-gruppo-loghi:has(> .cm-piu) > .cm-loghi::after { content: ""; order: 1; flex-basis: 100%; }
	.cm-gruppo-loghi:has(> .cm-piu) > .cm-loghi > :nth-child(n+3) { order: 2; margin-top: 18px; }
	.cm-gruppo-loghi:has(> .cm-piu) .cm-loghi img { height: calc(var(--h, 40px) * .66) !important; }
}
@media (max-width: 520px) {
	.cm-griglia-sostegno { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
	.cm-teli { display: none; }
}

/* Il colore del testo scelto nell'editor arriva dentro un <mark>: senza il suo
   stile in linea il browser gli darebbe il fondo giallo. */
mark.has-inline-color { background-color: transparent; }