/* Organico e sponsorizzate (home.contenuti) — bozza E, giro 3, 22/10/2026. Testi v2 (_lavoro/testi-strategia.md).
   In ordine: la testa; 1) «Oggi si sceglie dal telefono» con un telefono e una ricerca sulla mappa;
   2) «L'obiettivo è riempire l'agenda» con la settimana che si riempie scorrendo;
   3-4) l'interruttore di metallo: Organico (due video a confronto) / Sponsorizzate (tre campagne, un telefono con tre schermate);
   7) i risultati veri in organico; in fondo il link agli strumenti.
   Ogni selettore parte da .contenuti. Lo stato lo mette contenuti.js:
   .contenuti--js, data-moto="vivo|fermo", .visto, .acceso, .in-vista, .pieno, --i, --filo. */

.contenuti { position: relative; display: block; padding: 96px var(--g) 88px; }
.contenuti .contenuti__simboli { position: absolute; width: 0; height: 0; overflow: hidden; }
.contenuti .contenuti__nascosto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contenuti .contenuti__ic { display: block; width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* il piccolo «Esempio» su vetro */
.contenuti .contenuti__esempio {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; color: var(--lilla-chiaro);
  background: rgba(8, 9, 10, 0.62); border: 1px solid rgba(201, 169, 233, 0.34);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ── Testa e titoli ──────────────────────────── */
.contenuti .contenuti__titolo { font-size: clamp(36px, 9.6vw, 84px); line-height: 1.02; font-weight: 750; letter-spacing: -0.03em; text-wrap: balance; max-width: 11em; }
.contenuti .contenuti__frase { margin-top: 16px; max-width: 26em; color: var(--sec); font-size: 17.5px; line-height: 1.55; text-wrap: pretty; }
.contenuti .contenuti__sottotitolo { font-size: clamp(30px, 7.8vw, 54px); line-height: 1.06; font-weight: 740; letter-spacing: -0.028em; text-wrap: balance; max-width: 14em; }
.contenuti .contenuti__testo { margin-top: 14px; max-width: 32em; color: var(--sec); font-size: 16.5px; line-height: 1.58; text-wrap: pretty; }
.contenuti .contenuti__sottotitolo + .contenuti__testo { margin-top: 18px; }
.contenuti .contenuti__testo--forte { color: var(--testo); font-weight: 600; }

/* titolo: le parole salgono al loro posto (lo spezza contenuti.js) */
.contenuti .contenuti__p { display: inline-block; overflow: clip; overflow-clip-margin: 0.14em; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.contenuti .contenuti__p > span { display: inline-block; transition: transform 820ms var(--curva); transition-delay: calc(var(--k, 0) * 45ms); }
.contenuti.contenuti--js .contenuti__titolo:not(.visto) .contenuti__p > span { transform: translateY(110%); }

/* entrate in scena */
.contenuti.contenuti--js [data-entra] { transition: opacity 700ms ease-out, transform 900ms var(--curva); }
.contenuti.contenuti--js [data-entra]:not(.visto) { opacity: 0; transform: translateY(26px); }

/* ── I blocchi con un visual accanto ─────────── */
.contenuti .contenuti__blocco { margin-top: 76px; }
.contenuti .contenuti__vista { position: relative; margin: 28px 0 0; padding-top: 36px; }
.contenuti .contenuti__vista > .contenuti__esempio { position: absolute; left: 0; top: 0; z-index: 3; }

/* il telefono disegnato in HTML: le misure dentro sono in cqw, centesimi della larghezza del telefono */
.contenuti .telefono {
  position: relative; z-index: 1; width: min(100%, 262px); margin-inline: auto; container-type: inline-size;
  padding: 8px; border-radius: 44px; background: #050506;
  border: 1px solid rgba(247, 248, 248, 0.16);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 30px 70px -24px rgba(0, 0, 0, 0.9), 0 30px 90px -40px rgba(201, 169, 233, 0.55), inset 0 0 0 2px #121317;
}
.contenuti .telefono__schermo { position: relative; height: 196cqw; border-radius: 37px; overflow: hidden; background: #0C0D10; color: var(--testo); line-height: 1.25; isolation: isolate; }
/* corto: si vede solo la parte alta, poi sfuma nel fondo (il telefono «entra» nella pagina) */
.contenuti .telefono--corto { -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 99%); mask-image: linear-gradient(180deg, #000 76%, transparent 99%); }
.contenuti .telefono--corto .telefono__schermo { height: 162cqw; }
.contenuti .telefono__isola { position: absolute; left: 50%; top: 3cqw; z-index: 5; width: 30cqw; height: 8.4cqw; translate: -50% 0; border-radius: 99px; background: #000; box-shadow: 0 0 0 1px rgba(247, 248, 248, 0.06); }
/* la luce dietro al telefono */
.contenuti .contenuti__vista::before, .contenuti .contenuti__palco::before {
  content: ''; position: absolute; inset: 10% -6% 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 46% at 50% 52%, rgba(139, 111, 184, 0.19), rgba(139, 111, 184, 0) 72%);
}
.contenuti .barretta { display: inline-block; width: 16cqw; height: 3cqw; border-radius: 9px; background: rgba(232, 234, 237, 0.34); filter: blur(0.6px); }
.contenuti .sfoca { filter: blur(3px); }

/* ── 1 · La ricerca sulla mappa (colori di Google Maps, tema scuro) ── */
.contenuti .mappa { background: #1B1D21; }
.contenuti .mappa__terra { position: absolute; inset: 0; }
.contenuti .mappa__vie { position: absolute; left: 0; top: 0; width: 100%; height: 70%; }
.contenuti .mappa__acqua { fill: #14223A; }
.contenuti .mappa__parco { fill: #1C2B23; }
.contenuti .mappa__strade path { fill: none; stroke: #3A3F48; stroke-width: 8; stroke-linecap: round; }
.contenuti .mappa__strade-piccole path { fill: none; stroke: #2A2E35; stroke-width: 3.6; stroke-linecap: round; }
/* io sono qui: il punto blu */
.contenuti .mappa__io { position: absolute; left: 50%; top: 33%; width: 5cqw; height: 5cqw; translate: -50% -50%; border-radius: 50%; background: #4285F4; box-shadow: 0 0 0 1.1cqw #fff, 0 2px 8px rgba(0, 0, 0, 0.5); }
.contenuti .mappa__io::after { content: ''; position: absolute; inset: -5cqw; border-radius: 50%; background: rgba(66, 133, 244, 0.22); }
/* le puntine rosse */
.contenuti .mappa__pin {
  position: absolute; left: var(--x); top: var(--y); width: 7.4cqw; height: 7.4cqw; z-index: 1;
  translate: -50% -100%; transform-origin: 50% 100%; transition: transform 420ms var(--curva);
}
.contenuti .mappa__pin::before {
  content: ''; position: absolute; inset: 0; border-radius: 50% 50% 50% 0; rotate: -45deg; translate: 0 -0.6cqw;
  background: #EA4335; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.contenuti .mappa__pin::after { content: ''; position: absolute; left: 50%; top: 42%; width: 2.6cqw; height: 2.6cqw; translate: -50% -50%; border-radius: 50%; background: #7A1D14; }
.contenuti .mappa__pin.acceso { z-index: 2; transform: scale(1.45); }
.contenuti .mappa__cerca {
  position: absolute; left: 4.5cqw; right: 4.5cqw; top: 15cqw; z-index: 3; display: flex; align-items: center; gap: 3cqw;
  height: 13cqw; padding: 0 2.4cqw 0 4.6cqw; border-radius: 99px; background: #303134; color: #E8EAED;
  font-size: 5cqw; font-weight: 550; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.contenuti .mappa__cerca .contenuti__ic { font-size: 5.4cqw; color: #9AA0A6; stroke-width: 2.2; }
.contenuti .mappa__parola { flex: 1; transition: clip-path 900ms steps(10, end) 300ms; }
.contenuti .mappa__tu { width: 8.4cqw; height: 8.4cqw; border-radius: 50%; background: linear-gradient(140deg, #DFC9F0, #8B6FB8); }
.contenuti .mappa__filtri { position: absolute; left: 4.5cqw; top: 31cqw; z-index: 3; display: flex; gap: 2cqw; white-space: nowrap; }
.contenuti .mappa__filtri span { display: inline-flex; align-items: center; height: 8cqw; padding: 0 3.2cqw; border-radius: 99px; font-size: 3.5cqw; font-weight: 600; color: #E8EAED; background: #303134; border: 1px solid #3C4043; }
.contenuti .mappa__foglio {
  position: absolute; left: 0; right: 0; top: 58%; bottom: 0; z-index: 4; overflow: hidden;
  border-radius: 6cqw 6cqw 0 0; background: #202124; box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
}
.contenuti .mappa__maniglia { display: block; width: 10cqw; height: 1.2cqw; margin: 2.2cqw auto 0; border-radius: 9px; background: #5F6368; }
.contenuti .mappa__lista { position: absolute; left: 0; right: 0; top: 5cqw; bottom: 0; overflow: hidden; }
.contenuti .mappa__schede { list-style: none; margin: 0; padding: 0; transform: translateY(calc(var(--i, 0) * -38cqw)); transition: transform 900ms var(--curva); }
.contenuti .scheda { display: grid; gap: 1.4cqw; height: 38cqw; padding: 3cqw 5cqw 0; border-bottom: 1px solid #3C4043; }
.contenuti .scheda__testo { display: grid; gap: 1.2cqw; min-width: 0; }
.contenuti .scheda__testo b { font-size: 4.6cqw; font-weight: 650; color: #E8EAED; white-space: nowrap; }
.contenuti .scheda__voto, .contenuti .scheda__info { display: flex; align-items: center; gap: 1.6cqw; font-size: 3.5cqw; }
.contenuti .stelle { display: flex; gap: 0.4cqw; color: #FBBC04; }
.contenuti .stelle svg { width: 3.4cqw; height: 3.4cqw; fill: currentColor; }
.contenuti .stelle .spenta { color: #5F6368; }
.contenuti .scheda__info em { font-style: normal; font-weight: 600; color: #81C995; }
.contenuti .barretta--lunga { width: 26cqw; }
.contenuti .scheda__foto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; margin-top: 0.6cqw; }
.contenuti .scheda__foto i { display: block; height: 13cqw; border-radius: 2cqw; filter: blur(1.2px) saturate(0.85); }
/* foto sfocate: solo luce e colore, nessun locale riconoscibile */
.contenuti .scheda__foto .f1 { background: radial-gradient(60% 60% at 40% 60%, #C98E55, transparent 70%), radial-gradient(50% 50% at 75% 30%, #E7D6BC, transparent 70%), #3A2E26; }
.contenuti .scheda__foto .f2 { background: radial-gradient(70% 60% at 50% 70%, #8E4B32, transparent 70%), radial-gradient(40% 40% at 30% 25%, #F0C987, transparent 70%), #2A211C; }
.contenuti .scheda__foto .f3 { background: radial-gradient(60% 70% at 60% 50%, #5C6B47, transparent 70%), radial-gradient(40% 40% at 20% 30%, #D9B98B, transparent 70%), #24241E; }
.contenuti .scheda__foto .f4 { background: radial-gradient(80% 60% at 50% 100%, #6B4A3A, transparent 70%), radial-gradient(60% 40% at 50% 10%, #D7C3A6, transparent 70%), #2C2522; }
.contenuti .scheda__foto .f5 { background: radial-gradient(60% 60% at 50% 50%, #B65C3C, transparent 70%), radial-gradient(40% 40% at 80% 80%, #EAD9BC, transparent 70%), #33261F; }

/* ── 2 · Le quattro cose e la settimana ─────── */
.contenuti .cn-quattro { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; max-width: 34em; }
.contenuti .cn-quattro li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.5; color: var(--sec); text-wrap: pretty; }
.contenuti .cn-quattro li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 3px; height: 0.95em; border-radius: 2px; background: linear-gradient(180deg, #F4EAFF, #C9A9E9 50%, #8B6FB8); }
.contenuti .cn-quattro b { display: block; margin-bottom: 1px; font-size: 17.5px; font-weight: 720; letter-spacing: -0.01em; color: var(--testo); }
.contenuti .cn-obiettivo__chiusa { margin-top: 22px; max-width: 22em; font-size: clamp(20px, 5.4vw, 26px); line-height: 1.25; font-weight: 700; letter-spacing: -0.018em; color: var(--testo); text-wrap: balance; }

.contenuti .agenda {
  position: relative; z-index: 1; max-width: 520px; margin-inline: auto; padding: 18px 16px 16px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(22, 24, 27, 0.96), rgba(13, 14, 16, 0.96)); border: 1px solid var(--riga);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), 0 30px 90px -50px rgba(139, 111, 184, 0.45);
}
.contenuti .agenda::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #C9A9E9 30%, #EFE4FA 50%, #8B6FB8 70%, transparent); opacity: 0.7; }
.contenuti .agenda__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.contenuti .agenda__testa b { font-weight: 700; }
.contenuti .agenda__testa span { color: var(--sec); font-size: 12px; }
.contenuti .agenda__giorni { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.contenuti .agenda__giorni li { display: grid; justify-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--sec); }
.contenuti .agenda__giorni i { position: relative; display: block; width: 100%; max-width: 30px; height: 54px; border-radius: 8px; overflow: hidden; background: rgba(247, 248, 248, 0.06); }
.contenuti .agenda__giorni b { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(180deg, #6A6F79, #3C4049); transform-origin: 50% 100%; transform: scaleY(var(--pieno, 0)); transition: transform 700ms var(--curva); }
.contenuti .agenda__vuota i { outline: 1px dashed rgba(201, 169, 233, 0.55); outline-offset: -1px; }
.contenuti .agenda__vuota b { background: linear-gradient(180deg, #F4EAFF, #C9A9E9 40%, #8B6FB8); }
.contenuti .agenda__vuota span { color: var(--lilla); }
.contenuti .agenda__sere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.contenuti .agenda__sera { padding: 10px 8px 8px; border-radius: 16px; background: rgba(247, 248, 248, 0.025); border: 1px solid var(--riga); }
.contenuti .agenda__nome { padding-left: 2px; font-size: 12.5px; font-weight: 700; color: var(--lilla-chiaro); }
.contenuti .agenda__sera ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.contenuti .pren { position: relative; display: grid; align-content: center; gap: 2px; min-height: 48px; padding: 6px 8px; border-radius: 10px; border: 1px dashed rgba(247, 248, 248, 0.16); }
/* il posto vuoto: «libero»; la prenotazione arriva sopra */
.contenuti .pren::after { content: 'libero'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: rgba(163, 169, 179, 0.7); transition: opacity 300ms ease-out; }
.contenuti .pren::before { content: ''; position: absolute; inset: -1px; border-radius: 10px; background: rgba(201, 169, 233, 0.1); border: 1px solid rgba(201, 169, 233, 0.42); opacity: 0; transition: opacity 400ms ease-out; }
.contenuti .pren > span { position: relative; z-index: 1; opacity: 0; transform: translateY(6px); transition: opacity 400ms ease-out, transform 600ms var(--curva); }
.contenuti .pren.pieno::after { opacity: 0; }
.contenuti .pren.pieno::before, .contenuti .pren.pieno > span { opacity: 1; transform: none; }
.contenuti .pren__riga { font-size: 12px; line-height: 1.25; font-weight: 550; color: #D5D9DF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contenuti .pren__riga b { font-weight: 750; color: var(--testo); font-variant-numeric: tabular-nums; }
.contenuti .pren__da { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1.2; font-weight: 650; color: var(--lilla-chiaro); }
.contenuti .pren__da .contenuti__ic { font-size: 12px; stroke-width: 2; }
.contenuti .pren__da--wa .contenuti__ic { color: #25D366; }

/* ── 3 e 4 · Organico o sponsorizzate ───────── */
.contenuti .contenuti__scelta { margin-top: 84px; }
.contenuti .contenuti__interruttore { display: flex; width: 100%; max-width: 440px; }
.contenuti .contenuti__interruttore button { flex: 1 1 0; padding: 0 12px; font-size: 15px; letter-spacing: -0.005em; }
html:not(.js) .contenuti .contenuti__interruttore { display: none; }

/* la cornice resta ferma; dentro c'è un pannello alla volta (senza JavaScript stanno uno sotto l'altro) */
.contenuti .contenuti__pannelli {
  position: relative; margin-top: 14px; border-radius: 28px; overflow: clip; isolation: isolate;
  background: linear-gradient(180deg, rgba(22, 24, 27, 0.94), rgba(13, 14, 16, 0.94));
  border: 1px solid var(--riga);
}
.contenuti .contenuti__pannelli::before {
  content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, #C9A9E9 30%, #EFE4FA 50%, #8B6FB8 70%, transparent); opacity: 0.7;
}
.contenuti .contenuti__pannello { display: grid; }
html.js .contenuti .contenuti__pannello:not(.acceso) { display: none; }
html:not(.js) .contenuti .contenuti__pannello + .contenuti__pannello { border-top: 1px solid var(--riga); }
.contenuti[data-moto="vivo"] .contenuti__pannello.acceso { animation: contenuti-pannello 520ms var(--curva) both; }
@keyframes contenuti-pannello { from { opacity: 0; transform: translateY(12px); } }

/* la spiegazione */
.contenuti .contenuti__spiega { padding: 26px 20px 4px; }
.contenuti .contenuti__spiega--dopo { padding-top: 6px; padding-bottom: 28px; }
.contenuti .contenuti__nome { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; color: var(--lilla); }
.contenuti .contenuti__lead { margin: 8px 0 0; font-size: clamp(26px, 7.2vw, 40px); line-height: 1.1; font-weight: 740; letter-spacing: -0.026em; color: var(--testo); text-wrap: balance; }
.contenuti .contenuti__cose { margin-top: 14px; font-size: clamp(17px, 4.6vw, 20px); line-height: 1.42; font-weight: 600; color: #D5D9DF; text-wrap: pretty; }
.contenuti .contenuti__piu { margin-top: 14px; font-size: 16px; line-height: 1.58; color: var(--sec); text-wrap: pretty; max-width: 34em; }
.contenuti .contenuti__piu--forte { color: var(--testo); font-weight: 650; font-size: 17px; }
.contenuti .contenuti__punto { margin-top: 18px; font-size: clamp(21px, 5.8vw, 28px); line-height: 1.2; font-weight: 720; letter-spacing: -0.02em; color: var(--testo); text-wrap: balance; }

/* il palco dei visual dentro la cornice */
.contenuti .contenuti__palco { position: relative; touch-action: pan-y; }
.contenuti .contenuti__palco > .contenuti__esempio { position: absolute; left: 20px; top: 14px; z-index: 6; }

/* Organico: due video a confronto, ognuno con la sua didascalia */
.contenuti .cn-reel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 52px 20px 18px; }
.contenuti .reel { position: relative; z-index: 1; margin: 0; container-type: inline-size; }
.contenuti .reel__schermo {
  position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; isolation: isolate; color: #fff;
  background: radial-gradient(120% 80% at 50% 42%, #2B2521, #0D0B0A 80%);
  border: 1px solid rgba(247, 248, 248, 0.12);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9), 0 20px 60px -34px rgba(201, 169, 233, 0.5);
}
.contenuti .reel__schermo::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 22%, transparent 55%, rgba(0, 0, 0, 0.7)); }
.contenuti .reel figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.38; font-weight: 600; color: var(--sec); text-wrap: pretty; }
.contenuti .reel--nostro figcaption { color: var(--testo); }
/* il solito video: un piatto che gira piano, sfocato, e la canzone del momento */
.contenuti .reel__piatto {
  position: absolute; left: 50%; top: 44%; width: 128cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 34%, #D9D2C6 35% 41%, #A9A196 43% 45%, rgba(40, 34, 30, 0) 47%);
  filter: blur(0.9cqw);
}
.contenuti .reel__piatto i {
  position: absolute; inset: 15%; border-radius: 50%; filter: blur(2cqw) saturate(0.85);
  background:
    radial-gradient(circle at 40% 38%, #E6B676 0 7%, transparent 20%),
    radial-gradient(circle at 60% 60%, #A1513A 0 8%, transparent 22%),
    radial-gradient(circle at 34% 62%, #6E7A48 0 5%, transparent 16%),
    radial-gradient(circle at 62% 36%, #D49A5E 0 6%, transparent 19%),
    radial-gradient(circle at 50% 50%, #8F4A33 0 6%, transparent 18%),
    radial-gradient(circle at 46% 70%, #DDB27A 0 6%, transparent 18%),
    radial-gradient(circle, #B07E52 0 34%, #E8E1D5 52%, transparent 66%);
}
.contenuti .reel__cuore { position: absolute; left: 50%; top: 44%; z-index: 2; translate: -50% -50%; font-size: 30cqw; color: #fff; opacity: 0; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)); }
.contenuti .reel__cuore .contenuti__ic { fill: #fff; stroke: none; }
.contenuti .reel__lato { position: absolute; right: 4cqw; bottom: 26cqw; z-index: 2; display: grid; gap: 6cqw; font-size: 9cqw; }
.contenuti .reel__fondo { position: absolute; left: 5cqw; right: 17cqw; bottom: 6cqw; z-index: 2; display: grid; gap: 3cqw; }
.contenuti .reel__chi { display: flex; align-items: center; gap: 2.6cqw; font-size: 5.6cqw; white-space: nowrap; }
.contenuti .reel__chi b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.contenuti .reel__chi .barretta { width: 30cqw; height: 3.6cqw; background: rgba(255, 255, 255, 0.55); }
.contenuti .reel__av { flex: none; width: 9cqw; height: 9cqw; border-radius: 50%; background: linear-gradient(140deg, #7B7F88, #3B3E45); }
.contenuti .reel__av--locale { background: radial-gradient(circle, #1C1726 0 56%, transparent 58%), var(--cromo); }
.contenuti .reel__segui { flex: none; padding: 0.8cqw 2.4cqw; border-radius: 1.8cqw; border: 1px solid rgba(255, 255, 255, 0.7); font-size: 4.6cqw; font-weight: 700; }
.contenuti .reel__musica { display: flex; align-items: center; gap: 1.8cqw; font-size: 5.2cqw; font-weight: 600; white-space: nowrap; overflow: hidden; }
.contenuti .reel__musica .contenuti__ic { font-size: 5.6cqw; }
/* il nostro: una persona del locale che parla in camera, il format col suo nome, i sottotitoli */
.contenuti .reel__scena, .contenuti .post__foto--persona { background: radial-gradient(90% 60% at 82% 16%, rgba(223, 201, 240, 0.62), rgba(201, 169, 233, 0) 62%), radial-gradient(70% 50% at 8% 92%, rgba(139, 111, 184, 0.42), rgba(139, 111, 184, 0) 70%), linear-gradient(180deg, #221C2C, #0C0B10); }
.contenuti .reel__scena { position: absolute; inset: 0; }
.contenuti .reel__luce { position: absolute; right: -10%; top: 4%; width: 52%; height: 46%; border-radius: 40%; background: rgba(244, 234, 255, 0.28); filter: blur(6cqw); }
.contenuti .reel__persona {
  position: absolute; left: 50%; bottom: -8%; width: 92%; height: 82%; translate: -50% 0; transform-origin: 50% 100%;
  background:
    radial-gradient(ellipse 25% 17% at 50% 27%, #0B0A0E 0 95%, rgba(11, 10, 14, 0) 100%),
    radial-gradient(ellipse 13% 8% at 50% 43%, #0B0A0E 0 95%, rgba(11, 10, 14, 0) 100%),
    radial-gradient(ellipse 54% 40% at 50% 84%, #0B0A0E 0 95%, rgba(11, 10, 14, 0) 100%);
  filter: blur(1.5cqw) drop-shadow(0 0 3cqw rgba(223, 201, 240, 0.45));
}
.contenuti .reel__format {
  position: absolute; left: 5cqw; top: 6cqw; z-index: 2; padding: 1.6cqw 3cqw; border-radius: 2.4cqw;
  font-size: 5.6cqw; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap;
  background: rgba(8, 9, 10, 0.62); border: 1px solid rgba(201, 169, 233, 0.6);
}
.contenuti .reel__parla { position: absolute; left: 6cqw; right: 6cqw; top: 50%; z-index: 2; text-align: center; font-size: 7cqw; line-height: 1.22; font-weight: 800; letter-spacing: -0.01em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); text-wrap: balance; }
.contenuti .reel__parla span { display: inline-block; }
.contenuti .reel__voce { display: flex; align-items: center; gap: 1cqw; height: 5cqw; }
.contenuti .reel__voce i { display: block; width: 1.2cqw; height: 100%; border-radius: 1cqw; background: var(--lilla-chiaro); transform: scaleY(0.5); }
.contenuti .reel__voce i:nth-child(2) { transform: scaleY(0.85); } .contenuti .reel__voce i:nth-child(4) { transform: scaleY(0.7); }

/* Sponsorizzate: le tre campagne (si toccano) e il telefono con la loro schermata */
.contenuti .cn-campagne { position: relative; list-style: none; margin: 20px 0 0; padding: 0 0 0 20px; display: grid; gap: 4px; }
/* il filo di metallo: si riempie fino alla campagna accesa */
.contenuti .cn-campagne::before, .contenuti .cn-campagne::after { content: ''; position: absolute; left: 6px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; }
.contenuti .cn-campagne::before { background: rgba(247, 248, 248, 0.1); }
.contenuti .cn-campagne::after { background: linear-gradient(180deg, #F4EAFF, #C9A9E9 50%, #8B6FB8); transform-origin: 50% 0; transform: scaleY(var(--filo, 0)); transition: transform 600ms var(--curva); }
.contenuti .cn-campagna {
  position: relative; display: grid; gap: 3px; width: 100%; min-height: 44px; padding: 11px 14px; border: 0; border-radius: 14px;
  text-align: left; color: inherit; font: inherit; background: transparent; cursor: pointer; touch-action: manipulation;
  transition: background-color 250ms ease-out, box-shadow 250ms ease-out;
}
.contenuti .cn-campagna::before {
  content: ''; position: absolute; left: -19px; top: 17px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--nero); border: 2px solid rgba(247, 248, 248, 0.28); transition: background-color 250ms ease-out, border-color 250ms ease-out;
}
.contenuti .cn-campagna b { font-size: 17px; font-weight: 720; letter-spacing: -0.01em; color: var(--testo); }
.contenuti .cn-campagna span { font-size: 15px; line-height: 1.45; color: var(--sec); text-wrap: pretty; }
.contenuti .cn-campagna[aria-pressed="true"] { background: rgba(201, 169, 233, 0.08); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.3); }
.contenuti .cn-campagna[aria-pressed="true"]::before { background: var(--lilla); border-color: #F4EAFF; box-shadow: 0 0 12px rgba(201, 169, 233, 0.7); }
.contenuti .cn-campagna[aria-pressed="true"] span { color: #C3C8CF; }
.contenuti .cn-campagna:active { background: rgba(201, 169, 233, 0.12); }
@media (hover: hover) and (pointer: fine) { .contenuti .cn-campagna:hover { background: rgba(247, 248, 248, 0.04); } }
.contenuti .cn-campagna:focus-visible { outline: 2px solid var(--lilla); outline-offset: 2px; }
.contenuti .contenuti__come { margin-top: 18px; padding: 0 18px; font-size: 13.5px; white-space: nowrap; }
@media (max-width: 379px) { .contenuti .contenuti__come .contenuti__ic { display: none; } }
.contenuti .contenuti__come .contenuti__ic { font-size: 16px; stroke-width: 2; }

.contenuti .cn-annunci { display: grid; justify-items: center; padding: 48px 20px 0; }
.contenuti #cn-sponsor .contenuti__spiega--dopo { padding-top: 0; margin-top: -24px; position: relative; z-index: 2; }
.contenuti .cn-annunci__cosa { position: relative; z-index: 2; display: grid; margin-bottom: 14px; }
.contenuti .cn-annunci__cosa span {
  grid-area: 1 / 1; justify-self: center; padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  font-size: clamp(12px, 3.4vw, 13px); font-weight: 700; color: var(--lilla-chiaro); background: rgba(201, 169, 233, 0.1); border: 1px solid rgba(201, 169, 233, 0.32);
  opacity: 0; transform: translateY(4px); transition: opacity 250ms ease-out, transform 400ms var(--curva);
}
.contenuti .cn-annunci__cosa span.acceso { opacity: 1; transform: none; }
.contenuti .schermo { position: absolute; inset: 0; padding-top: 13cqw; opacity: 0; transform: translateX(8%); transition: opacity 300ms ease-out, transform 600ms var(--curva); }
.contenuti .schermo.acceso { opacity: 1; transform: none; }
.contenuti .post__testa { display: flex; align-items: center; gap: 2.6cqw; padding: 3cqw 4cqw; }
.contenuti .post__av { flex: none; width: 9cqw; height: 9cqw; border-radius: 50%; background: radial-gradient(circle, #1C1726 0 58%, transparent 60%), var(--cromo); }
.contenuti .post__chi { display: grid; gap: 0.4cqw; }
.contenuti .post__chi b { font-size: 4.1cqw; font-weight: 750; }
.contenuti .post__chi small { font-size: 3.3cqw; color: var(--sec); }
.contenuti .post__altro { margin-left: auto; display: flex; gap: 1cqw; }
.contenuti .post__altro i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--testo); }
.contenuti .post__foto { position: relative; overflow: hidden; aspect-ratio: 1 / 1.02; padding: 6cqw 5.5cqw; }
.contenuti .post__foto--tavola {
  background:
    radial-gradient(46% 40% at 74% 78%, rgba(229, 180, 120, 0.7), rgba(229, 180, 120, 0) 70%),
    radial-gradient(36% 30% at 56% 92%, rgba(168, 74, 49, 0.55), rgba(168, 74, 49, 0) 70%),
    radial-gradient(70% 55% at 90% 6%, rgba(201, 169, 233, 0.28), rgba(201, 169, 233, 0) 70%),
    linear-gradient(180deg, #19161D, #0C0B0E);
}
.contenuti .post__luce { position: absolute; right: -8%; bottom: -14%; width: 64%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, transparent 0 46%, rgba(217, 210, 198, 0.55) 48% 56%, transparent 60%); filter: blur(1.4cqw); }
.contenuti .post__titolo { position: relative; z-index: 1; max-width: 86%; font-size: 7.8cqw; line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.contenuti .post__sotto { position: relative; z-index: 1; margin-top: 2.4cqw; font-size: 4cqw; font-weight: 600; color: #D5D9DF; }
.contenuti .post__dove, .contenuti .post__visto {
  position: absolute; left: 5.5cqw; z-index: 1; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 2.8cqw 1.4cqw 2.2cqw;
  border-radius: 99px; font-size: 3.6cqw; font-weight: 700; background: rgba(8, 9, 10, 0.72); border: 1px solid rgba(201, 169, 233, 0.45);
}
.contenuti .post__dove { bottom: 5cqw; }
.contenuti .post__dove .contenuti__ic, .contenuti .post__visto .contenuti__ic { font-size: 4.2cqw; color: var(--lilla); }
.contenuti .post__foto--persona { display: flex; flex-direction: column; justify-content: flex-end; }
.contenuti .post__foto--persona .reel__persona { width: 80%; height: 86%; left: 60%; }
.contenuti .post__visto { top: 5cqw; }
.contenuti .post__cta {
  display: flex; align-items: center; justify-content: space-between; height: 11cqw; padding: 0 4cqw;
  font-size: 4.1cqw; font-weight: 750; color: var(--nero); background: linear-gradient(100deg, #EFE4FA 0%, #C9A9E9 55%, #B391DD 100%);
}
.contenuti .post__cta .contenuti__ic { font-size: 5cqw; stroke-width: 2.4; }
.contenuti .post__azioni { display: flex; align-items: center; gap: 4cqw; padding: 3.4cqw 4cqw; font-size: 5.6cqw; color: rgba(247, 248, 248, 0.92); }
.contenuti .post__salva { margin-left: auto; }
/* lo schermo bloccato col messaggio WhatsApp */
.contenuti .schermo--blocco {
  background: radial-gradient(80% 46% at 24% 18%, rgba(201, 169, 233, 0.42), rgba(201, 169, 233, 0) 70%), radial-gradient(70% 60% at 92% 92%, rgba(139, 111, 184, 0.55), rgba(139, 111, 184, 0) 70%), #0B0A10;
}
.contenuti .blocco__ora { display: grid; justify-items: center; margin-top: 7cqw; }
.contenuti .blocco__ora small { font-size: 4.6cqw; font-weight: 600; color: #E9E3F3; }
.contenuti .blocco__ora b { font-size: 21cqw; line-height: 1.05; font-weight: 640; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #F4EEFB; }
.contenuti .blocco__avviso {
  display: flex; align-items: flex-start; gap: 3cqw; margin: 12cqw 3.6cqw 0; padding: 3.6cqw; border-radius: 5.4cqw;
  background: rgba(46, 44, 54, 0.74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  opacity: 0; transform: translateY(-5cqw) scale(0.97); transition: opacity 400ms ease-out 350ms, transform 700ms var(--curva) 350ms;
}
.contenuti .schermo.acceso .blocco__avviso { opacity: 1; transform: none; }
.contenuti .blocco__wa { flex: none; display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 2.4cqw; background: #25D366; color: #fff; }
.contenuti .blocco__wa .contenuti__ic { font-size: 6.4cqw; stroke-width: 1.7; }
.contenuti .blocco__testo { display: grid; gap: 0.8cqw; min-width: 0; font-size: 3.8cqw; line-height: 1.32; color: #EDEAF2; }
.contenuti .blocco__app { display: flex; justify-content: space-between; gap: 2cqw; }
.contenuti .blocco__app b { font-size: 4cqw; font-weight: 700; color: #fff; }
.contenuti .blocco__app small { font-size: 3.4cqw; color: rgba(237, 234, 242, 0.65); }

/* ── 7 · Alcuni risultati in organico ────────── */
.contenuti .contenuti__migliori { margin-top: 88px; }
.contenuti .contenuti__ponte { margin-bottom: 14px; max-width: 26em; font-size: 17.5px; line-height: 1.5; color: var(--sec); }
.contenuti .contenuti__grande { margin-top: 12px; font-size: clamp(34px, 9.4vw, 84px); line-height: 1.02; font-weight: 790; letter-spacing: -0.035em; text-wrap: balance; max-width: 13em; }
.contenuti .contenuti__tessere { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px 12px; }
.contenuti.contenuti--js .contenuti__tessere > li[data-entra]:nth-child(even) { transition-delay: 110ms; }
.contenuti .tessera { display: block; color: inherit; text-decoration: none; border-radius: 14px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.contenuti .tessera__foto {
  position: relative; display: block; border-radius: 14px; overflow: hidden; isolation: isolate;
  background: #0B0C0E; border: 1px solid var(--riga-2);
  box-shadow: 0 0 0 1px rgba(201, 169, 233, 0.05), 0 22px 50px -26px rgba(201, 169, 233, 0.42), 0 18px 36px -20px rgba(0, 0, 0, 0.8);
  transition: transform 300ms var(--curva), border-color 300ms ease-out;
}
.contenuti .tessera__foto img { display: block; width: 100%; height: auto; }
/* una passata di luce, una volta sola, quando la tessera entra */
.contenuti .tessera__foto::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(239, 228, 250, 0.22) 50%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(-110%);
}
.contenuti[data-moto="vivo"] .contenuti__tessere > li.visto .tessera__foto::after { transform: translateX(110%); transition: transform 1300ms var(--curva) 350ms; }
.contenuti a.tessera:active .tessera__foto { transform: scale(0.975); }
@media (hover: hover) and (pointer: fine) {
  .contenuti a.tessera:hover .tessera__foto { transform: translateY(-4px); border-color: rgba(201, 169, 233, 0.45); }
}
.contenuti a.tessera:focus-visible { outline: none; }
.contenuti a.tessera:focus-visible .tessera__foto { outline: 2px solid var(--lilla); outline-offset: 3px; }
.contenuti .tessera__chi { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 9px; font-size: 12.5px; line-height: 1.35; color: var(--sec); }
.contenuti .tessera__chi b { font-weight: 700; color: var(--testo); }
.contenuti .tessera__fuori { font-size: 15px; color: var(--lilla); stroke-width: 2; }
.contenuti .tessera__nota { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--sec); text-wrap: pretty; }

.contenuti .contenuti__altri { margin-top: 26px; display: grid; gap: 16px; }
.contenuti .contenuti__dash { margin: 0; }
.contenuti .contenuti__dash-foto { display: block; border-radius: 14px; box-shadow: 0 22px 50px -28px rgba(201, 169, 233, 0.4), 0 18px 36px -22px rgba(0, 0, 0, 0.8); }
.contenuti .contenuti__dash-foto img { display: block; width: 100%; height: auto; }
.contenuti .contenuti__fb {
  display: grid; grid-template-columns: minmax(96px, 116px) minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 14px; border-radius: 20px; background: rgba(15, 16, 17, 0.92); border: 1px solid var(--riga);
}
.contenuti .contenuti__fb-logo { display: block; aspect-ratio: 720 / 302; border-radius: 11px; overflow: hidden; background: #F2EAD6; }
.contenuti .contenuti__fb-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.contenuti .contenuti__fb-num { font-size: clamp(28px, 8vw, 40px); line-height: 1; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.contenuti .contenuti__fb-cosa { margin-top: 5px; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.contenuti .contenuti__fb-chi { font-size: 12.5px; color: var(--sec); }
.contenuti .contenuti__fonte { margin-top: 14px; font-size: 13px; color: var(--sec); }

/* telefono: la quinta tessera sta da sola, al centro */
@media (max-width: 639px) {
  .contenuti .contenuti__tessere > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); transition-delay: 0ms; }
}

/* ── In fondo: tutti gli strumenti ───────────── */
.contenuti .contenuti__tutti { display: flex; width: 100%; max-width: 640px; margin-top: 56px; padding: 14px 10px 14px 22px; border-radius: 26px; text-align: left; font-size: 15.5px; line-height: 1.4; }
.contenuti .contenuti__tutti .metallo-scritta { width: 100%; justify-content: space-between; gap: 14px; }
.contenuti .contenuti__tutti-testo { font-weight: 550; color: #D5D9DF; }
.contenuti .contenuti__tutti-testo b { font-weight: 720; color: var(--testo); }

/* ── Movimento: solo quando si vede, mai con «riduci movimento» o «Ferma le animazioni» ── */
.contenuti[data-moto="vivo"] .mappa__parola { clip-path: inset(0 100% 0 0); }
.contenuti[data-moto="vivo"] .cn-mappa.visto .mappa__parola { clip-path: inset(0 0 0 0); }
.contenuti[data-moto="vivo"] .in-vista .mappa__io::after { animation: contenuti-onda 2.4s ease-out infinite; }
.contenuti[data-moto="vivo"] .in-vista .reel__piatto { animation: contenuti-gira 16s linear infinite; }
.contenuti[data-moto="vivo"] .in-vista .reel__cuore { animation: contenuti-cuore 4.8s var(--curva) 1.2s infinite; }
.contenuti[data-moto="vivo"] .in-vista .reel__persona { animation: contenuti-parla 3.2s ease-in-out infinite alternate; }
.contenuti[data-moto="vivo"] .in-vista .reel__parla span { opacity: 0.3; animation: contenuti-parola 6s linear infinite; animation-delay: calc(var(--w) * 300ms); }
.contenuti[data-moto="vivo"] .in-vista .reel__voce i { animation: contenuti-voce 0.9s ease-in-out infinite alternate; }
.contenuti[data-moto="vivo"] .in-vista .reel__voce i:nth-child(2) { animation-delay: -0.3s; }
.contenuti[data-moto="vivo"] .in-vista .reel__voce i:nth-child(3) { animation-delay: -0.6s; }
.contenuti[data-moto="vivo"] .in-vista .reel__voce i:nth-child(4) { animation-delay: -0.15s; }
.contenuti[data-moto="vivo"] .in-vista .reel__voce i:nth-child(5) { animation-delay: -0.45s; }
@keyframes contenuti-onda { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes contenuti-gira { to { transform: rotate(360deg); } }
@keyframes contenuti-cuore { 0% { opacity: 0; transform: scale(0.3); } 8% { opacity: 1; transform: scale(1.12); } 14% { transform: scale(1); } 30% { opacity: 1; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes contenuti-parla { from { transform: translateY(0) rotate(-0.6deg); } to { transform: translateY(-1.2%) rotate(0.8deg); } }
@keyframes contenuti-parola { 0% { opacity: 0.3; } 3%, 72% { opacity: 1; } 82%, 100% { opacity: 0.3; } }
@keyframes contenuti-voce { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

.contenuti[data-moto="fermo"] *, .contenuti[data-moto="fermo"] *::before, .contenuti[data-moto="fermo"] *::after { animation: none !important; }
/* fuori schermo anche la luce delle scritte cromate sta ferma */
.contenuti.contenuti--js:not(.contenuti--vista) .cromo { animation-play-state: paused; }

/* ── Tablet e computer ───────────────────────── */
@media (min-width: 640px) {
  .contenuti .contenuti__spiega { padding: 32px 34px 6px; }
  .contenuti .contenuti__spiega--dopo { padding-bottom: 34px; }
  .contenuti .cn-reel { gap: 18px; padding: 56px 34px 20px; max-width: 620px; }
  .contenuti .cn-annunci { padding: 56px 34px 0; }
  .contenuti .contenuti__palco > .contenuti__esempio { left: 34px; }
  .contenuti .agenda { padding: 22px 22px 20px; }
  .contenuti .agenda__sere { gap: 12px; }
  .contenuti .agenda__sera { padding: 12px 10px 10px; }
  .contenuti .pren__riga { font-size: 13px; }
  .contenuti .pren__da { font-size: 12px; }
  .contenuti .contenuti__tessere { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
  .contenuti.contenuti--js .contenuti__tessere > li[data-entra] { transition-delay: calc(var(--i, 0) * 80ms); }
  .contenuti .contenuti__tessere > li:nth-child(2) { --i: 1; }
  .contenuti .contenuti__tessere > li:nth-child(3) { --i: 2; }
  .contenuti .contenuti__tessere > li:nth-child(4) { --i: 3; }
  .contenuti .contenuti__tessere > li:nth-child(5) { --i: 4; }
  .contenuti .contenuti__altri { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 20px; }
}
@media (min-width: 1024px) {
  .contenuti { padding-top: 120px; padding-bottom: 112px; }
  .contenuti .contenuti__testa { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; gap: 48px; }
  /* il titolo segue la larghezza della sua colonna: «sponsorizzate.» non passa mai sopra la frase */
  .contenuti .contenuti__titolo { font-size: min(84px, calc((100vw - 2 * var(--g) - 48px) * 0.074)); }
  .contenuti .contenuti__frase { margin-top: 0; padding-bottom: 10px; }
  .contenuti .contenuti__testo { font-size: 17.5px; }

  /* 1 e 2: testo e visual affiancati, a righe alterne */
  .contenuti .contenuti__blocco { margin-top: 128px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px; }
  .contenuti .contenuti__vista { margin: 0; }
  .contenuti .cn-perche .contenuti__vista > .contenuti__esempio { left: calc(50% - 170px); }
  .contenuti .telefono { width: 300px; }
  .contenuti .cn-obiettivo .cn-agenda { order: -1; }
  .contenuti .cn-quattro { gap: 16px; }
  .contenuti .cn-quattro li { font-size: 16.5px; }
  .contenuti .agenda { padding: 26px 26px 22px; }
  .contenuti .agenda__giorni i { height: 64px; max-width: 36px; }

  /* la cornice: spiegazione a sinistra, visual a destra */
  .contenuti .contenuti__scelta { margin-top: 128px; }
  .contenuti .contenuti__pannelli { margin-top: 18px; }
  .contenuti .contenuti__pannello { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .contenuti .contenuti__spiega { grid-column: 1; padding: 52px 8px 6px 56px; }
  .contenuti .contenuti__spiega--dopo { padding-top: 4px; padding-bottom: 56px; }
  .contenuti .contenuti__palco { grid-column: 2; grid-row: 1 / span 2; }
  .contenuti .contenuti__lead { font-size: clamp(34px, 3vw, 44px); }
  .contenuti .contenuti__cose { font-size: 20px; }
  .contenuti .contenuti__piu { font-size: 17px; }
  .contenuti .contenuti__punto { font-size: clamp(24px, 2.1vw, 30px); }
  /* i due video restano in vista mentre si legge l'organico */
  .contenuti .cn-reel { align-self: start; position: sticky; top: calc(var(--testa) + 24px); padding: 52px 52px 40px 16px; max-width: none; }
  .contenuti .contenuti__palco > .contenuti__esempio { left: 16px; top: 18px; }
  .contenuti .reel figcaption { font-size: 15px; }
  .contenuti .cn-annunci { align-self: center; padding: 56px 56px 0 16px; }
  .contenuti #cn-sponsor .contenuti__spiega--dopo { margin-top: 0; }
  .contenuti .cn-annunci .telefono { width: 320px; }
  .contenuti .cn-campagne { max-width: 520px; }

  .contenuti .contenuti__migliori { margin-top: 128px; }
  .contenuti .contenuti__migliori-testa { display: grid; gap: 4px; }
  .contenuti .contenuti__ponte { font-size: 19px; }
  .contenuti .contenuti__tessere { margin-top: 40px; grid-template-columns: repeat(5, minmax(0, 236px)); justify-content: space-between; gap: 20px; }
  .contenuti .contenuti__altri { margin-top: 36px; grid-template-columns: minmax(0, 620px) minmax(0, 470px); justify-content: space-between; gap: 32px; }
  .contenuti .contenuti__fb { padding: 18px 20px; grid-template-columns: 150px minmax(0, 1fr); }
  .contenuti .contenuti__fb-num { font-size: 40px; }
  .contenuti .contenuti__tutti { margin-top: 72px; padding: 16px 12px 16px 28px; font-size: 16.5px; max-width: 760px; }
}