/* Le 24 ore - hub campagna. Prefisso h24-. Token della piattaforma con fallback. */
.h24 { --h24-blue: var(--brand-blue, #4A9EFF); --h24-orange: var(--brand-orange, #FF6B35); --h24-bg: var(--brand-bg, #0E0F13); --h24-card: var(--brand-bg-card, #14161c); --h24-border: var(--brand-border, rgba(255,255,255,.08)); --h24-text: var(--text-primary, #f2f4f8); --h24-muted: var(--text-muted, #8B94A1); --h24-sec: var(--text-secondary, #cfd6e0); }
.h24-sub { color: var(--h24-sec); font-size: 1.15rem; margin: .25rem 0 1rem; }
.h24-state { display: inline-flex; align-items: center; gap: .5rem; color: var(--h24-muted); }
.h24-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--h24-orange); box-shadow: 0 0 10px var(--h24-orange); }
.h24-intro { max-width: 62ch; font-size: 1.1rem; line-height: 1.6; margin-top: 1.25rem; }

/* contenitore e titoli (gli hub definiscono il proprio layout) */
.h24 .wrap { max-width: 1120px; margin: 0 auto; padding: 48px 32px 64px; }
.h24 h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; margin: .2em 0 .3em; color: var(--h24-text); }
.h24 h2 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .6rem; color: var(--h24-text); }
.h24 .cap-tag { color: var(--h24-orange); font-size: .75rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.h24 .da-pubinfo { font-size: .85rem; }
.h24-tools { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .75rem; }
.h24-node.is-playing circle { stroke: var(--h24-orange); fill: var(--h24-orange); opacity: 1; animation: h24-pulse .9s ease-out 1; }
@keyframes h24-pulse { 0% { r: 2.2; } 40% { r: 4.2; } 100% { r: 2.6; } }
.h24-dial.is-sweeping .h24-ring { filter: drop-shadow(0 0 6px rgba(74,158,255,.45)); }
.h24-hint { font-size: .8rem; color: var(--h24-muted); margin-top: .5rem; }

/* quadrante */
.h24-dial-wrap { display: grid; grid-template-columns: minmax(280px, 520px) 1fr; gap: 3rem; align-items: start; margin: 3rem 0; }
.h24-dial { margin: 0; position: relative; }
.h24-dial-svg { width: 100%; height: auto; display: block; overflow: visible; }
.h24-ring { fill: none; stroke: var(--h24-blue); stroke-width: 1.6; opacity: .85; stroke-linecap: round;
  stroke-dasharray: 276.46; stroke-dashoffset: 276.46; transform: rotate(-90deg); transform-origin: 50% 50%;
  animation: h24-ring 1.1s cubic-bezier(.2,.7,.2,1) .4s forwards; }
.h24-hand-b { stroke: var(--h24-blue); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 38; stroke-dashoffset: 38; animation: h24-hand 0.55s ease-out 1.2s forwards; }
.h24-hand-o { stroke: var(--h24-orange); stroke-width: 1.6; stroke-linecap: round; opacity: 0; transform-origin: 50% 50%; transform: rotate(0deg);
  animation: h24-orange 0.9s cubic-bezier(.34,1.35,.5,1) 1.25s forwards; transition: transform .6s cubic-bezier(.34,1.35,.5,1); }
.h24-center { fill: var(--h24-blue); transform-origin: 50% 50%; transform: scale(0); animation: h24-dot .25s ease-out 1.9s forwards; }
@keyframes h24-ring { to { stroke-dashoffset: 0; } }
@keyframes h24-hand { to { stroke-dashoffset: 0; } }
@keyframes h24-orange { from { opacity: 0; transform: rotate(0deg); } to { opacity: .9; transform: rotate(-45deg); } }
@keyframes h24-dot { to { transform: scale(1); } }
.h24-node { cursor: pointer; }
.h24-node circle { fill: var(--h24-bg); stroke: var(--h24-blue); stroke-width: .6; opacity: .45; transition: opacity .2s; }
.h24-node.is-online circle { fill: var(--h24-blue); opacity: 1; }
.h24-node.is-prep circle, .h24-node.is-dev circle { stroke: var(--h24-orange); opacity: .8; }
.h24-node.is-active circle { stroke: var(--h24-orange); stroke-width: 1; opacity: 1; }
.h24-node text { font-size: 3px; fill: var(--h24-muted); text-anchor: middle; font-weight: 600; letter-spacing: .05em; pointer-events: none; }
.h24-node.is-online text { fill: var(--h24-text); }
.h24-dial-cap { margin-top: 1rem; color: var(--h24-sec); min-height: 2.6em; font-size: 1rem; }
.h24-dial-cap b { color: var(--h24-text); }
.h24-listen, .h24-sweep { margin-top: 0; background: transparent; color: var(--h24-blue); border: 1px solid var(--h24-border); border-radius: 999px; padding: .45rem 1rem; font: inherit; font-size: .85rem; cursor: pointer; }
.h24-listen:hover, .h24-sweep:hover { border-color: var(--h24-blue); }
.h24-sweep.is-on { border-color: var(--h24-orange); color: var(--h24-orange); }

/* lista ore */
.h24-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem .9rem; }
.h24-list li { display: grid; grid-template-columns: 3.4rem 1fr; align-items: baseline; gap: .6rem; padding: .45rem .5rem; border-radius: 8px; border: 1px solid transparent; color: var(--h24-muted); }
.h24-list li .h { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--h24-sec); }
.h24-list li .t { color: var(--h24-sec); }
.h24-list li .s { display: block; font-size: .78rem; color: var(--h24-muted); }
.h24-list li.is-online { border-color: var(--h24-border); background: var(--h24-card); }
.h24-list li.is-online .t, .h24-list li.is-online .h { color: var(--h24-text); }
.h24-list li.is-online .s { color: var(--h24-blue); }
.h24-list li a { color: inherit; text-decoration: none; display: contents; }
.h24-list li.is-active { border-color: var(--h24-orange); }

/* sezioni */
.h24-sigla, .h24-process, .h24-diary { max-width: 72ch; margin: 3rem 0; }
.h24-sigla p, .h24-process p { line-height: 1.6; }
.h24-sigla-video { width: 100%; max-width: 360px; aspect-ratio: 9/16; margin-top: 1rem; border-radius: 12px; background: #000; }
.h24-diary ul { list-style: none; padding: 0; }
.h24-diary li { padding: .6rem 0; border-top: 1px solid var(--h24-border); line-height: 1.5; }
.h24-diary time { color: var(--h24-blue); font-weight: 700; margin-right: .6rem; font-variant-numeric: tabular-nums; }

/* episodio */
.h24-back { display: inline-block; color: var(--h24-muted); text-decoration: none; margin-bottom: 1rem; }
.h24-ep-grid { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 2.5rem; align-items: start; margin-top: 1.5rem; }
.h24-player video { width: 100%; aspect-ratio: 9/16; border-radius: 14px; background: #000; }
.h24-claim { font-family: 'Newsreader', Georgia, serif; font-size: 1.6rem; line-height: 1.25; margin: 0 0 1rem; }
.h24-ep-body p { line-height: 1.6; }
.h24-ep-body h3 { margin-top: 1.5rem; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--h24-orange); }
.h24-sources, .h24-links { padding-left: 1.1rem; }
.h24-sources li, .h24-links li { margin: .35rem 0; line-height: 1.5; }
.h24-sources a { color: var(--h24-blue); word-break: break-all; }

@media (max-width: 860px) { .h24-dial-wrap, .h24-ep-grid { grid-template-columns: 1fr; } .h24-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .h24-ring, .h24-hand-b, .h24-hand-o, .h24-center { animation: none; } .h24-ring { stroke-dashoffset: 0; } .h24-hand-b { stroke-dashoffset: 0; } .h24-hand-o { opacity: .9; transform: rotate(-45deg); } .h24-center { transform: scale(1); } }

/* ---- scheda episodio 2.0 (06-07.09): capitoli, video spiegato, trascrizione, condivisione ---- */
.h24-langs { margin: .7rem 0 0; font-size: .85rem; color: var(--h24-muted); display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.h24-langs a { color: var(--h24-blue); text-decoration: none; letter-spacing: .08em; }
.h24-langs b { color: var(--h24-text); letter-spacing: .08em; }
.h24-chapters { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.h24-ch { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; padding: .4rem; border: 1px solid var(--h24-border); border-radius: 10px; background: var(--h24-card); color: var(--h24-sec); text-decoration: none; transition: border-color .2s; }
.h24-ch img { grid-row: 1 / span 2; width: 44px; height: 78px; aspect-ratio: auto; object-fit: cover; border-radius: 6px; display: block; }
.h24-ch-t { font-size: .72rem; font-weight: 700; color: var(--h24-blue); font-variant-numeric: tabular-nums; }
.h24-ch-n { font-size: .88rem; color: var(--h24-text); line-height: 1.2; }
.h24-ch:hover, .h24-ch.is-on { border-color: var(--h24-orange); }
.h24-tech { margin-top: 1.4rem; font-size: .8rem; color: var(--h24-muted); line-height: 1.6; }
.h24-tech span { color: var(--h24-orange); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: .7rem; margin-right: .4rem; }

.h24-explained { margin: 2rem 0 0; padding: 0; }
.h24-explained, .h24-transcript, .h24-share, .h24-ep-more { padding: 0; }
.h24-scene { display: grid; grid-template-columns: minmax(240px, 460px) 1fr; gap: 2rem; align-items: center; padding: 1.6rem 0; border-top: 1px solid var(--h24-border); }
.h24-scene-media img { width: 100%; max-width: 220px; height: auto; border-radius: 12px; display: block; }
.h24i { width: 100%; aspect-ratio: 936/560; cursor: pointer; }
.h24i-svg { width: 100%; height: 100%; display: block; overflow: visible; font-family: inherit; }
.h24i-lbl { font-size: 22px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; fill: #cfd6e0; }
.h24-scene-body .cap-tag { margin-bottom: .5rem; }
.h24-plate { font-family: 'Newsreader', Georgia, serif; font-size: 1.45rem; line-height: 1.3; margin: 0 0 .7rem; color: var(--h24-text); }
.h24-note { line-height: 1.6; color: var(--h24-sec); margin: 0 0 .6rem; max-width: 60ch; }
.h24-scene-src { font-size: .8rem; color: var(--h24-muted); margin: 0 0 .8rem; }
.h24-scene-src a { color: var(--h24-blue); }
.h24-seek { display: inline-block; color: var(--h24-blue); text-decoration: none; font-size: .9rem; border: 1px solid var(--h24-border); border-radius: 999px; padding: .4rem .9rem; }
.h24-seek:hover { border-color: var(--h24-blue); }

.h24-transcript { margin: 1.5rem 0 0; max-width: 72ch; }
.h24-transcript summary { cursor: pointer; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--h24-orange); font-weight: 700; }
.h24-transcript ol { list-style: none; padding: 0; margin: .8rem 0 0; }
.h24-transcript li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .6rem; padding: .35rem 0; line-height: 1.5; }
.h24-tr-t { color: var(--h24-blue); text-decoration: none; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem; }
.h24-captions { font-size: .85rem; color: var(--h24-muted); margin-top: .8rem; }
.h24-captions a { color: var(--h24-blue); margin-left: .5rem; text-decoration: none; letter-spacing: .08em; }

.h24-share { margin: 2rem 0 0; padding: 1.4rem 1.6rem !important; border: 1px solid var(--h24-border); border-radius: 14px; background: var(--h24-card); }
.h24-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.h24-btn { background: var(--h24-blue); color: #0E0F13; border: 0; border-radius: 999px; padding: .55rem 1.1rem; font: inherit; font-weight: 700; cursor: pointer; }
.h24-btn.is-done { background: var(--h24-orange); }
.h24-share-lic { font-size: .85rem; line-height: 1.6; color: var(--h24-sec); margin: .9rem 0 0; }
.h24-lbl { display: block; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--h24-muted); margin-bottom: .4rem; }
#h24embed { width: 100%; font: .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--h24-sec); background: var(--h24-bg); border: 1px solid var(--h24-border); border-radius: 8px; padding: .6rem; resize: vertical; }

.h24-ep-more { margin: 2rem 0 0; }
.h24-episode .cap.h24-ep { padding-bottom: 0; }
.h24-ep-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.h24-ep-cols h3 { margin-top: 0; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--h24-orange); }
.h24-transfer { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--h24-muted); border: 1px solid var(--h24-border); border-radius: 999px; padding: .05rem .5rem; margin-left: .3rem; white-space: nowrap; }
.h24-links a { color: var(--h24-text); text-decoration: none; }
.h24-links a:hover { color: var(--h24-blue); }
.h24-links-k { color: var(--h24-blue); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; margin-right: .3rem; }
.h24-links small { color: var(--h24-muted); }
.h24-strip { list-style: none; padding: 0; margin: 2rem 0 .8rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.h24-strip li { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--h24-border); display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: var(--h24-muted); font-variant-numeric: tabular-nums; }
.h24-strip li a, .h24-strip li span { color: inherit; text-decoration: none; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.h24-strip li.is-online { border-color: var(--h24-blue); color: var(--h24-text); background: rgba(74,158,255,.12); }
.h24-strip li.is-prep, .h24-strip li.is-dev { border-color: var(--h24-orange); }
.h24-strip li.is-active { background: var(--h24-orange); border-color: var(--h24-orange); color: #0E0F13; }

@media (max-width: 860px) { .h24-chapters { grid-template-columns: repeat(2, 1fr); } .h24-scene, .h24-share-grid, .h24-ep-cols { grid-template-columns: 1fr; } .h24-scene-media img { max-width: 180px; } }


/* ---- hub 2.1 (08.09): spaziatura propria, eroe con quadrante, collezione, diario piccolo ---- */
.h24 .wrap > section, .h24 .wrap > details { padding: 0; margin: 0 0 3.25rem; }
.h24 .wrap > section.cap { padding: 0; }
.h24-hero2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 2rem 4rem; align-items: start; }
.h24-hero2 .h24-hero-text { padding-top: 2.5rem; }
.h24-hero2 .h24-dial { width: 100%; }
.h24-latest { display: grid; grid-template-columns: 56px 1fr; gap: .9rem; align-items: center; margin-top: 1.5rem; padding: .7rem .9rem; border: 1px solid var(--h24-border); border-radius: 14px; background: var(--h24-card); text-decoration: none; color: var(--h24-text); max-width: 34rem; transition: border-color .2s, transform .2s; }
.h24-latest:hover { border-color: var(--h24-blue); transform: translateY(-1px); }
.h24-latest img { width: 56px; height: 100px; object-fit: cover; border-radius: 8px; display: block; }
.h24-latest small { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--h24-orange); font-weight: 700; margin-bottom: .2rem; }
.h24-latest b { display: block; font-size: 1.05rem; font-weight: 600; }
.h24-latest em { display: block; font-style: normal; font-family: 'Newsreader', Georgia, serif; font-size: 1rem; color: var(--h24-sec); margin-top: .15rem; line-height: 1.3; }
.h24-hours h2 { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--h24-muted); margin-bottom: .8rem; }
.h24-list3 { grid-template-columns: repeat(3, 1fr); }
.h24-list li.is-online { transition: border-color .2s; } .h24-list li.is-online:hover { border-color: var(--h24-blue); }
.h24-alert { fill: rgba(74,158,255,.07); stroke: var(--h24-blue); stroke-width: .6; stroke-opacity: .55; }
.h24-alert-n { fill: none; stroke: var(--h24-orange); stroke-width: .9; stroke-linecap: round; }
.h24-alert-k { font-size: 2.6px; fill: var(--h24-muted); text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
.h24-alert-k.is-min { fill: var(--h24-orange); } .h24-alert-k.is-peak { fill: var(--h24-blue); }
.h24-alert-d { fill: var(--h24-orange); } .h24-alert-d.is-peak { fill: var(--h24-blue); }
.h24-curve { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--h24-border); }
.h24-curve-k { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--h24-sec); font-weight: 700; margin-bottom: .3rem; }
.h24-curve-svg { width: 100%; height: auto; display: block; }
.h24-curve-p { fill: rgba(74,158,255,.08); stroke: var(--h24-blue); stroke-width: 1.6; stroke-linejoin: round; }
.h24-curve-n { fill: none; stroke: var(--h24-orange); stroke-width: 2.2; stroke-linecap: round; }
.h24-curve-m line { stroke: var(--h24-orange); stroke-width: 1; stroke-dasharray: 2 2; }
.h24-curve-m circle { fill: var(--h24-orange); }
.h24-curve-t { font-size: 8px; fill: var(--h24-muted); text-anchor: middle; }
.h24-curve-t.is-min { fill: var(--h24-orange); } .h24-curve-t.is-peak { fill: var(--h24-blue); }
.h24-curve-x { font-size: .8rem; color: var(--h24-muted); line-height: 1.5; margin-top: .4rem; }
.h24-cap-a { display: inline-flex; gap: 2px; margin-left: .4rem; vertical-align: middle; }
.h24-cap-a i { width: 7px; height: 9px; border-radius: 2px; background: var(--h24-border); }
.h24-cap-a i.on { background: var(--h24-blue); } .h24-cap-a.is-low i.on { background: var(--h24-orange); }
.h24-method .cap-tag { margin-bottom: .3rem; }
.h24-method h2 { font-size: 1.6rem; }
.h24-method p { line-height: 1.65; margin: 0 0 .9rem; max-width: 66ch; }
.h24-now circle { fill: var(--h24-orange); filter: drop-shadow(0 0 3px var(--h24-orange)); animation: h24pulse 2.4s ease-in-out infinite; }
.h24-now text { display: none; font-size: 3.2px; fill: var(--h24-orange); font-weight: 700; text-anchor: middle; letter-spacing: .05em; }
@keyframes h24pulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
.h24-dial-cap { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; }
.h24-dial-cap img { width: 40px; height: 71px; object-fit: cover; border-radius: 6px; display: block; }
.h24-dial-cap a { color: var(--h24-blue); text-decoration: none; font-weight: 600; }
.h24-sigla-row { display: grid; grid-template-columns: 180px 1fr; gap: 2.2rem; align-items: center; max-width: none; }
.h24-sigla-row .h24-sigla-video { max-width: 180px; margin: 0; }
.h24-sigla-row p { max-width: 62ch; }
.h24-coll h2 small { font-size: .8rem; color: var(--h24-muted); font-weight: 500; margin-left: .6rem; letter-spacing: .1em; }
.h24-cards { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.4rem 1.2rem; }
.h24-card { display: flex; flex-direction: column; gap: .7rem; }
.h24-card-media { position: relative; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--h24-border); transition: transform .25s, border-color .25s, box-shadow .25s; }
.h24-card:hover .h24-card-media, .h24-card.is-playing .h24-card-media { transform: translateY(-3px); border-color: var(--h24-blue); box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.h24-card-v { width: 100%; height: 100%; object-fit: cover; display: block; }
.h24-card-h { position: absolute; bottom: .8rem; left: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .85rem; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); letter-spacing: .06em; }
.h24-card-play { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; cursor: pointer; padding: 0; }
.h24-card-play span { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(14,15,19,.55); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(4px); transition: transform .2s, opacity .2s; }
.h24-card-play span::after { content: ''; position: absolute; left: 23px; top: 18px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.h24-card:hover .h24-card-play span { transform: scale(1.08); }
.h24-card.is-playing .h24-card-play span { opacity: 0; }
.h24-card-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); }
.h24-card-bar i { display: block; height: 100%; width: 0; background: var(--h24-orange); transition: width .25s linear; }
.h24-card-body { display: flex; flex-direction: column; }
.h24-card-t { display: block; font-weight: 600; font-size: 1.05rem; color: var(--h24-text); text-decoration: none; }
.h24-card-t:hover { color: var(--h24-blue); }
.h24-card-s { display: block; font-size: .78rem; color: var(--h24-blue); margin-top: .15rem; }
.h24-card-c { font-family: 'Newsreader', Georgia, serif; font-size: 1rem; line-height: 1.3; color: var(--h24-sec); margin: .35rem 0 .2rem; }
.h24-card-o { font-size: .82rem; color: var(--h24-muted); text-decoration: none; }
.h24-card-o:hover { color: var(--h24-orange); }
.h24-card.is-queue { opacity: .55; }
.h24-card.is-queue .h24-card-media { background: var(--h24-card); border-style: dashed; }
.h24-card-q { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--h24-orange); }
.h24-more { font-size: .85rem; color: var(--h24-muted); margin-top: 1.2rem; }
.h24-process2 { max-width: 72ch; }
.h24-diary2 { max-width: 72ch; font-size: .82rem; color: var(--h24-muted); border-top: 1px solid var(--h24-border); padding-top: .8rem; }
.h24-diary2 summary { cursor: pointer; list-style: none; display: flex; gap: .7rem; align-items: baseline; }
.h24-diary2 summary::-webkit-details-marker { display: none; }
.h24-diary2 summary span { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--h24-sec); font-weight: 700; }
.h24-diary2 summary::after { content: '+'; margin-left: auto; color: var(--h24-blue); font-weight: 700; }
.h24-diary2[open] summary::after { content: '\2013'; }
.h24-diary2 ul { margin-top: .6rem; }
.h24-diary2 li { padding: .45rem 0; line-height: 1.45; }
@media (max-width: 860px) { .h24-hero2 { grid-template-columns: 1fr; } .h24-list3 { grid-template-columns: 1fr; } .h24-sigla-row { grid-template-columns: 1fr; } .h24-sigla-row .h24-sigla-video { max-width: 220px; } .h24-cards { grid-template-columns: repeat(2, 1fr); gap: 1rem .8rem; } }


/* ---- hub 2.1c: player in sovrimpressione ---- */
.h24-lb { position: fixed; inset: 0; z-index: 9000; display: none; }
.h24-lb.is-open { display: block; }
.h24-lb-lock { overflow: hidden; }
.h24-lb-back { position: absolute; inset: 0; background: rgba(8,10,16,.92); backdrop-filter: blur(6px); }
.h24-lb-in { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(280px, 46vh) minmax(260px, 420px); gap: 2rem; align-content: center; justify-content: center; padding: 2rem; }
.h24-lb-stage { position: relative; aspect-ratio: 9/16; max-height: 86vh; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.h24-lb-v { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.h24-lb-v::cue { background: rgba(14,15,19,.75); color: #fff; font-family: 'Newsreader', Georgia, serif; font-size: 1.05rem; }
.h24-lb-big { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(14,15,19,.55); cursor: pointer; transition: opacity .25s, transform .25s; }
.h24-lb-big span::after { content: ''; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.h24-lb.is-playing .h24-lb-big { opacity: 0; pointer-events: none; transform: scale(.9); }
.h24-lb-ctl { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem .9rem .8rem; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); opacity: 0; transition: opacity .25s; }
.h24-lb-stage:hover .h24-lb-ctl, .h24-lb:not(.is-playing) .h24-lb-ctl, .h24-lb-stage:focus-within .h24-lb-ctl { opacity: 1; }
.h24-lb-prog { position: relative; height: 14px; cursor: pointer; margin-bottom: .4rem; }
.h24-lb-prog::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 3px; background: rgba(255,255,255,.22); border-radius: 2px; }
.h24-lb-buf, .h24-lb-fill { position: absolute; left: 0; top: 6px; height: 3px; width: 0; border-radius: 2px; }
.h24-lb-buf { background: rgba(255,255,255,.35); } .h24-lb-fill { background: var(--h24-orange); }
.h24-lb-fill::after { content: ''; position: absolute; right: -6px; top: -4.5px; width: 12px; height: 12px; border-radius: 50%; background: var(--h24-orange); box-shadow: 0 0 8px rgba(255,107,53,.8); }
.h24-lb-ticks i { position: absolute; top: 5px; width: 2px; height: 5px; background: rgba(255,255,255,.7); margin-left: -1px; }
.h24-lb-row { display: flex; align-items: center; gap: .5rem; color: #fff; font-size: .8rem; font-variant-numeric: tabular-nums; }
.h24-lb-sp { flex: 1; }
.h24-lb-b { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: #fff; cursor: pointer; position: relative; font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .05em; }
.h24-lb-b:hover { background: rgba(255,255,255,.12); }
.h24-lb-pp::after { content: ''; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.h24-lb.is-playing .h24-lb-pp::after { border: 0; left: 11px; top: 10px; width: 4px; height: 14px; background: #fff; box-shadow: 8px 0 0 #fff; }
.h24-lb-cc { border: 1px solid rgba(255,255,255,.5); border-radius: 6px; width: auto; height: 24px; padding: 0 .4rem; opacity: .55; }
.h24-lb-cc.is-on { opacity: 1; background: #fff; color: #0E0F13; }
.h24-lb-mute::after { content: ''; position: absolute; left: 10px; top: 11px; width: 0; height: 0; border-style: solid; border-width: 6px 8px 6px 0; border-color: transparent #fff transparent transparent; }
.h24-lb-mute::before { content: ''; position: absolute; left: 20px; top: 9px; width: 8px; height: 16px; border: 2px solid #fff; border-left: 0; border-radius: 0 12px 12px 0; }
.h24-lb-mute.is-off::before { border-color: rgba(255,255,255,.35); }
.h24-lb-full::after { content: ''; position: absolute; left: 10px; top: 10px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 2px; }
.h24-lb-side { color: var(--h24-text); align-self: center; }
.h24-lb-k { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--h24-orange); font-weight: 700; }
.h24-lb-t { font-size: 1.7rem; font-weight: 600; letter-spacing: -.01em; margin: .3rem 0 .4rem; }
.h24-lb-c { font-family: 'Newsreader', Georgia, serif; font-size: 1.15rem; line-height: 1.3; color: var(--h24-sec); margin: 0 0 1rem; }
.h24-lb-langs { font-size: .8rem; color: var(--h24-muted); display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0 0 1rem; }
.h24-lb-langs button { font: inherit; font-weight: 700; color: var(--h24-blue); background: transparent; border: 1px solid var(--h24-border); border-radius: 999px; padding: .2rem .6rem; cursor: pointer; }
.h24-lb-langs button.is-on { background: var(--h24-blue); color: #0E0F13; border-color: var(--h24-blue); }
.h24-lb-chk { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--h24-muted); margin-bottom: .3rem; }
.h24-lb-ch { list-style: none; margin: 0 0 1rem; padding: 0; }
.h24-lb-ch li { padding: .35rem .5rem; border-radius: 6px; cursor: pointer; color: var(--h24-sec); font-size: .9rem; }
.h24-lb-ch li b { color: var(--h24-blue); font-variant-numeric: tabular-nums; margin-right: .4rem; font-weight: 600; }
.h24-lb-ch li:hover { background: var(--h24-card); } .h24-lb-ch li.is-on { background: var(--h24-card); color: var(--h24-text); box-shadow: inset 2px 0 0 var(--h24-orange); }
.h24-lb-open a { color: var(--h24-blue); text-decoration: none; font-weight: 600; }
.h24-lb-nav { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1rem; }
.h24-lb-nav button { font: inherit; font-size: .8rem; color: var(--h24-muted); background: transparent; border: 1px solid var(--h24-border); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; }
.h24-lb-nav button:hover { color: var(--h24-text); border-color: var(--h24-blue); }
.h24-lb-x { position: absolute; top: 1rem; right: 1.2rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--h24-border); background: rgba(14,15,19,.7); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.h24-card.is-preview .h24-card-play span { opacity: .35; }
@media (max-width: 860px) { .h24-lb-in { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; align-content: start; overflow-y: auto; } .h24-lb-stage { max-height: 68vh; margin: 0 auto; width: min(100%, 68vh * 9 / 16); } .h24-lb-side { align-self: start; } .h24-lb-ch { display: none; } .h24-lb-ctl { opacity: 1; } }

.h24-you circle { fill: var(--h24-blue); stroke: #0E0F13; stroke-width: .6; }
.h24-where { font-size: .82rem; color: var(--h24-sec); line-height: 1.6; margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--h24-border); }
.h24-where b { color: var(--h24-text); font-weight: 600; margin-right: .2rem; }
.h24-where .is-day { color: var(--h24-blue); } .h24-where .is-night { color: var(--h24-orange); }
.h24-where-n { color: var(--h24-muted); font-size: .72rem; }
.h24-views { color: var(--h24-muted); }

.h24-now-line { margin: .6rem 0 .2rem; font-size: .85rem; color: var(--h24-sec); display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }
.h24-now-line b { color: var(--h24-text); font-variant-numeric: tabular-nums; }
.h24-now-line i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; vertical-align: 0; }
.h24-now-line i.is-ch { background: var(--h24-orange); box-shadow: 0 0 6px var(--h24-orange); } .h24-now-line i.is-you { background: var(--h24-blue); }
.h24-now-you { color: var(--h24-muted); }
.h24-cap-go { white-space: nowrap; }
.h24-band { display: grid; grid-template-columns: minmax(260px, 1.1fr) 1fr 1fr; gap: 1.5rem 2.5rem; align-items: start; padding-top: 1.5rem; border-top: 1px solid var(--h24-border); }
.h24-band .h24-curve { margin: 0; padding: 0; border: 0; }
.h24-band .h24-curve-x { margin: 0; padding-top: 1.6rem; }
.h24-band .h24-where { margin: 0; padding: 1.6rem 0 0; border: 0; }
@media (max-width: 860px) { .h24-band { grid-template-columns: 1fr; gap: .6rem; } .h24-band .h24-curve-x, .h24-band .h24-where { padding-top: .4rem; } .h24-hero2 .h24-hero-text { padding-top: 0; } }