/* Media kit /collabora — stesso mondo del sito: tavole a fumetti, didascalie gialle. Mobile first. */
:root {
  --yellow: #FFCC00;
  --yellow-deep: #F2B800;
  --pink: #E63969;
  --blue: #2464C4;
  --green: #2E9E5B;
  --orange: #FF5A3C;
  --purple: #6B3FA0;
  --dark: #14141C;
  --cream: #F4EFE2;
  --ink: #0D0D0D;
  --ink-soft: #3A3630;
  --line: 3px solid var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --radius: 4px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dock-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  caret-color: var(--pink);
  padding-bottom: var(--dock-h);
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-underline-offset: 0.2em; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 2px; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--yellow); border: var(--line); padding: 0.5rem 1rem; font-weight: 800; }
.skip:focus { top: 1rem; }

.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 1.05em; height: 1.05em; }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

/* ===== Didascalia gialla con contorno nero (la firma dei Reel) ===== */
.caption-y, .reel__caption, .h2__mark, .hero__hl {
  color: var(--yellow);
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink),
    3px 4px 0 var(--ink);
}

/* ===== Topbar ===== */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.7rem 1.25rem;
  padding-top: calc(0.7rem + env(safe-area-inset-top, 0px));
  background: var(--dark);
  color: var(--cream);
  border-bottom: var(--line);
}
.topbar__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; min-width: 0; }
.topbar__logo {
  font-family: 'Bangers', cursive; font-size: 1.25rem; letter-spacing: 0.05em; line-height: 1;
  background: var(--yellow); color: var(--ink); padding: 0.3rem 0.5rem 0.2rem; border: 2px solid var(--ink);
  transform: rotate(-3deg);
}
.topbar__name { font-weight: 700; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.9; }
.live-pill {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border: 2px solid var(--cream); border-radius: 999px; color: var(--cream);
}
.live-pill__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #8A8578; }
.live-pill[data-state="live"] { border-color: #3DDC84; }
.live-pill[data-state="live"] .live-pill__dot { background: #3DDC84; animation: pulse 1.8s var(--ease-out) infinite; }
.live-pill[data-state="archive"] .live-pill__dot { background: var(--yellow); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7); } 100% { box-shadow: 0 0 0 0.6rem rgba(61, 220, 132, 0); } }

/* ===== Bottoni ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3.1rem; padding: 0.8rem 1.4rem;
  font-weight: 800; font-size: 1rem; line-height: 1.1; text-decoration: none;
  border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn--primary { background: var(--yellow); color: var(--ink); }
.btn--ghost { background: #fff; color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--yellow); }
.btn--dark:hover { box-shadow: 5px 5px 0 var(--pink); }
.btn--ghost-light { background: transparent; color: var(--cream); border-color: var(--cream); box-shadow: 3px 3px 0 var(--cream); }
.btn--ghost-light:hover { box-shadow: 5px 5px 0 var(--cream); }
.btn--sm { min-height: 2.6rem; padding: 0.55rem 1rem; font-size: 0.92rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.cta-row .btn { flex: 1 1 12rem; }

/* ===== Hero ===== */
.hero {
  padding: 1.5rem 1rem 2.5rem;
  background-color: var(--cream);
  background-image:
    linear-gradient(90deg, rgba(13, 13, 13, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(13, 13, 13, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.hero__panel {
  position: relative;
  max-width: 72rem; margin: 0 auto;
  background: #fff; border: var(--line); box-shadow: var(--shadow);
  padding: 1.6rem 1.25rem 1.4rem;
  display: grid;
  grid-template-areas: "title" "cast" "cta" "lead";
  gap: 1.1rem;
}
.hero__title {
  grid-area: title;
  font-family: 'Bangers', cursive; font-weight: 400;
  font-size: clamp(3.1rem, 15vw, 6rem); line-height: 0.92; letter-spacing: 0.01em;
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero__hl {
  display: inline-block; margin-top: 0.12em;
  background: var(--ink); padding: 0.06em 0.18em 0;
  transform: rotate(-2deg);
}
.hero__lead { grid-area: lead; font-size: 1.05rem; font-weight: 600; color: var(--ink-soft); max-width: 36rem; }
.hero .cta-row { grid-area: cta; }
.hero__cast {
  grid-area: cast;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  margin: -0.4rem -1.25rem -0.6rem 0;
}
.hero__pino {
  width: auto; height: 13.5rem;
  margin-left: -0.6rem;
  filter: drop-shadow(4px 4px 0 rgba(13, 13, 13, 0.18));
  transform-origin: 50% 100%;
  animation: shrug 4.5s var(--ease-out) infinite;
}
@keyframes shrug { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-2.5deg) translateY(-3px); } 94% { transform: rotate(2deg); } }
.bubble {
  position: relative; align-self: start;
  background: #fff; border: var(--line); border-radius: 1.4rem;
  padding: 0.8rem 0.95rem; z-index: 2;
  font-weight: 700; font-size: 0.9rem; line-height: 1.3;
  box-shadow: var(--shadow-sm);
}
/* Coda del balloon verso Pino (a destra) */
.bubble::after {
  content: ''; position: absolute; right: -1.15rem; top: 45%;
  width: 1.5rem; height: 1.2rem; background: #fff;
  border-top: var(--line); border-right: var(--line);
  transform: skewY(-28deg);
}
.bubble { transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out); transform-origin: 90% 60%; }
.bubble.is-loading { opacity: 0; transform: scale(0.85) rotate(-3deg); }
.bubble__num { display: block; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--pink); letter-spacing: -0.01em; }

/* ===== Nastro ===== */
.ticker { background: var(--yellow); border-block: var(--line); overflow: hidden; transform: rotate(-1.2deg); margin: -0.6rem -1rem 0; position: relative; z-index: 2; }
.ticker__track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker__item { font-family: 'Bangers', cursive; font-size: 1.35rem; letter-spacing: 0.04em; padding: 0.55rem 1.2rem 0.4rem; white-space: nowrap; display: flex; align-items: center; gap: 1.2rem; }
.ticker__item::after { content: ''; width: 0.55rem; height: 0.55rem; background: var(--ink); transform: rotate(45deg); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ===== Sezioni ===== */
.section { padding: 4.5rem 0 4rem; position: relative; }
.section--dark { background: var(--dark); color: var(--cream); border-block: var(--line); }
.section--yellow { background: var(--yellow); border-block: var(--line); }
.section--pink { background: var(--pink); color: #fff; border-block: var(--line); }
.h2 {
  font-family: 'Bangers', cursive; font-weight: 400;
  font-size: clamp(2.4rem, 9vw, 4.2rem); line-height: 0.98; letter-spacing: 0.015em;
  margin-bottom: 0.7rem; text-wrap: balance; max-width: 18ch;
}
.h2--light { color: var(--cream); }
.h2__mark { display: inline-block; }
.h3 { font-family: 'Bangers', cursive; font-weight: 400; font-size: 1.9rem; line-height: 1.05; letter-spacing: 0.02em; margin-bottom: 0.6rem; }
.h3--light { color: var(--cream); }
.section__lead { font-size: 1.05rem; font-weight: 600; max-width: 38rem; margin-bottom: 2rem; color: var(--ink-soft); }
.section__lead--light { color: #D9D3C4; }
.section--pink .section__lead { color: #FFE3EA; }
.footnote { font-size: 0.82rem; font-weight: 600; color: #6B655A; margin-top: 1.1rem; }
.footnote--ink { color: #4A3E00; }

/* ===== Tavola dei numeri (griglia a vignette irregolari) ===== */
.board {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cell {
  position: relative; overflow: hidden;
  background: #fff; border: var(--line); box-shadow: var(--shadow);
  padding: 1rem 1rem 1.1rem;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35rem;
  min-height: 8.5rem;
}
.cell--hero { grid-column: 1 / -1; background: var(--dark); color: var(--cream); min-height: 12rem; }
.cell--wide { grid-column: 1 / -1; }
.cell--yellow { background: var(--yellow); }
.cell--pink { background: var(--pink); color: #fff; }
.cell--fb { background: #1877F2; color: #fff; }
.bubble__split { display: block; margin-top: 0.4rem; font-size: 0.75rem; font-weight: 800; color: var(--ink-soft); }
/* I numeri usano Poppins, non Bangers: la font a fumetto deforma le cifre e le rende difficili da leggere in fretta. */
.cell__value {
  font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(2rem, 9vw, 2.9rem); line-height: 1;
}
.cell--hero .cell__value { font-size: clamp(3rem, 15vw, 4.6rem); }
.cell__label { font-weight: 700; font-size: 0.9rem; line-height: 1.3; }
.cell__sub { font-size: 0.8rem; font-weight: 700; opacity: 0.85; }
.cell--hero .cell__label { color: #D9D3C4; }
.cell__tag {
  position: absolute; top: 0.8rem; left: 0.8rem;
  font-family: 'Bangers', cursive; font-size: 1rem; letter-spacing: 0.05em;
  background: var(--pink); color: #fff; border: 2px solid var(--ink); padding: 0.15rem 0.5rem 0.05rem;
  transform: rotate(-3deg);
}
.cell--hero .cell__tag { background: var(--yellow); color: var(--ink); }
.cell__trio { display: grid; gap: 0.9rem; }
.cell__trio > div { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); align-items: center; gap: 0.8rem; }
.cell__trio > div + div { border-top: 2px dashed rgba(13, 13, 13, 0.25); padding-top: 0.9rem; }
.cell__trio .cell__value { font-size: 1.9rem; }
.cell__trio .cell__label { font-size: 0.88rem; }
.cell__value, .cell__label, .cell__sub { display: block; }
.cell__chart { width: 100%; height: 3.2rem; margin-bottom: 0.3rem; overflow: visible; }
.cell__chart path { fill: none; stroke: var(--pink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cell__pino { position: absolute; right: -0.8rem; bottom: -3.2rem; height: 11.5rem; width: auto; opacity: 1; pointer-events: none; }
.cell--hero .cell__value, .cell--hero .cell__label { position: relative; z-index: 1; max-width: 70%; }
.board.is-loading .cell__value { color: transparent; background: linear-gradient(90deg, #EEE8DA, #F8F4EA, #EEE8DA); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: 3px; }
.board.is-loading .cell--hero .cell__value { background: linear-gradient(90deg, #26262F, #34343F, #26262F); background-size: 200% 100%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ===== Rail puntate ===== */
.rail {
  display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 1.25rem;
  padding: 0.5rem 1.25rem 1.6rem;
  scrollbar-width: thin; scrollbar-color: var(--yellow) #26262F;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-track { background: #26262F; }
.rail::-webkit-scrollbar-thumb { background: var(--yellow); border-radius: 4px; }
.ep {
  flex: 0 0 min(76vw, 17.5rem);
  aspect-ratio: 9 / 15;
  scroll-snap-align: start;
  position: relative; overflow: hidden;
  border: var(--line); border-color: var(--ink); box-shadow: 6px 6px 0 #000;
  background: var(--c, var(--blue)); color: var(--ink);
  display: flex; flex-direction: column;
  padding: 1rem;
}
.ep__stats { display: flex; gap: 0.5rem; flex-wrap: wrap; position: relative; z-index: 2; }
.ep__stat { background: #fff; border: 2px solid var(--ink); padding: 0.25rem 0.55rem 0.2rem; font-weight: 800; font-size: 0.82rem; line-height: 1.2; }
.ep__stat b { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; margin-right: 0.2rem; }
.ep__stat--follow { background: var(--ink); color: var(--yellow); }
.ep__title { font-family: 'Bangers', cursive; font-weight: 400; font-size: 1.55rem; line-height: 1; letter-spacing: 0.02em; margin-top: 0.8rem; position: relative; z-index: 2; color: var(--ink); max-width: 90%; }
.ep__punch {
  margin: auto -1rem -1rem; padding: 0.75rem 1rem 0.85rem; position: relative; z-index: 2;
  background: var(--ink); border-top: var(--line);
  font-family: 'Bangers', cursive; font-weight: 400; font-size: 1.45rem; line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase;
}
.ep__img { position: absolute; right: -1.5rem; bottom: 2.2rem; height: 72%; width: auto; z-index: 1; opacity: 0.95; }
.ep__badge {
  position: absolute; top: 3.6rem; right: -2.4rem; z-index: 3;
  background: var(--yellow); border: 2px solid var(--ink);
  font-weight: 800; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.2rem 2.6rem; transform: rotate(35deg);
}
/* Reel veri: copertina a tutta card, video che parte al tocco */
.ep--live { background: #26262F; color: #fff; aspect-ratio: 9 / 16; padding: 0.8rem; }
.ep--live .ep__stat { color: var(--ink); }
.ep--live .ep__stat--follow { color: var(--yellow); }
.reel-cover, .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: #000; }
.reel-video { z-index: 1; }
.reel-play {
  position: absolute; left: 50%; top: 50%; z-index: 4; translate: -50% -50%;
  width: 4.2rem; height: 4.2rem; display: grid; place-items: center;
  background: var(--yellow); color: var(--ink); border: var(--line); border-radius: 50%;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.2s var(--ease-out), opacity 0.25s;
}
.reel-play svg { width: 1.9rem; height: 1.9rem; fill: currentColor; margin-left: 0.2rem; }
.reel-play:hover { transform: scale(1.06) rotate(-4deg); }
.reel-play:active { transform: scale(0.94); }
/* Durante la riproduzione il bottone diventa un grande tasto trasparente: tocchi il video e metti in pausa */
.is-playing .reel-play { inset: 0; translate: none; width: auto; height: auto; left: 0; top: 0; border-radius: 0; background: transparent; border-color: transparent; box-shadow: none; color: transparent; }
.is-playing .reel-play svg { opacity: 0; }
.is-playing .ep__stats, .is-playing .ep__foot, .is-playing .ep__badge, .is-playing .clip__meta { opacity: 0; pointer-events: none; }
.ep__stats, .ep__foot, .ep__badge, .clip__meta { transition: opacity 0.25s var(--ease-out); }
.ep__foot { margin: auto -0.8rem -0.8rem; padding: 3rem 0.8rem 0.8rem; position: relative; z-index: 5; background: linear-gradient(transparent, rgba(0, 0, 0, 0.9) 42%); pointer-events: none; }
.ep__cap { font-weight: 700; font-size: 0.85rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.35rem; }
.ep__meta { font-size: 0.72rem; font-weight: 700; color: #D9D3C4; }
.ep__ig { pointer-events: auto; display: inline-block; margin-top: 0.5rem; padding: 0.45rem 0; font-size: 0.78rem; font-weight: 800; color: var(--yellow); text-decoration: underline; text-underline-offset: 0.25em; }
.ep--live .ep__stats { z-index: 5; }
.ep--live .ep__badge { z-index: 5; }
.rail-nav { display: none; gap: 0.6rem; justify-content: flex-end; }
.rail-btn { width: 3rem; height: 3rem; display: grid; place-items: center; background: var(--yellow); color: var(--ink); border: var(--line); box-shadow: 3px 3px 0 #000; }
.rail-btn:active { transform: translate(3px, 3px); box-shadow: none; }

.recent { margin-top: 3.5rem; }
.recent__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.recent__grid--collab { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clip {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden;
  border: var(--line); border-color: #000; background: #26262F; color: #fff;
  box-shadow: 4px 4px 0 #000;
  transition: transform 0.2s var(--ease-out);
}
.clip .reel-play { width: 3.2rem; height: 3.2rem; }
.clip .reel-play svg { width: 1.4rem; height: 1.4rem; }
.clip__meta { position: absolute; inset: auto 0 0 0; z-index: 3; pointer-events: none; padding: 2.2rem 0.6rem 0.6rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); display: flex; flex-direction: column; gap: 0.15rem; }
.clip__views { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1; color: var(--yellow); }
.clip__sub { font-size: 0.72rem; font-weight: 700; color: #E9E4D8; }

/* ===== Prova: il finto Reel ===== */
.prova { display: grid; gap: 1.6rem; align-items: start; grid-template-areas: "copy" "phone" "cta"; }
.prova__copy { grid-area: copy; }
.prova__cta { grid-area: cta; }
.prova__cta .btn { width: 100%; }
.phone { grid-area: phone; }
.scenes { margin-bottom: 0; }
.field { display: block; margin-bottom: 1.2rem; }
.field__label { display: block; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.45rem; }
.field__input {
  width: 100%; min-height: 3.4rem; padding: 0.8rem 1rem;
  font: 700 1.15rem 'Poppins', sans-serif; color: var(--ink);
  background: #fff; border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  outline: none; transition: box-shadow 0.15s var(--ease-out);
}
.field__input::placeholder { color: #6E6758; }
.field__input:focus { box-shadow: 5px 5px 0 var(--pink); }
.scenes { border: 0; margin-bottom: 1.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem;
  padding: 0.5rem 0.95rem; font-weight: 800; font-size: 0.92rem;
  background: #fff; border: 2px solid var(--ink); border-radius: 999px;
  transition: transform 0.15s var(--ease-out), background-color 0.15s;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--yellow); transform: rotate(-2deg); }
.chip:hover { transform: translateY(-2px); }
.chip__dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid currentColor; overflow: hidden; flex: none; }
.chip__thumb { width: 100%; height: 100%; object-fit: cover; }

.phone {
  justify-self: center; width: min(100%, 21rem);
  padding: 0.6rem; background: var(--ink); border-radius: 2.2rem;
  box-shadow: 8px 8px 0 rgba(13, 13, 13, 0.35);
}
.phone__screen {
  position: relative; overflow: hidden; aspect-ratio: 9 / 16;
  border-radius: 1.7rem; background: #000;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
/* Fotogramma vero, preso da un nostro Reel pubblicato. */
.reel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.5s var(--ease-out); transform-origin: 50% 62%; }
.reel.is-zoom .reel__bg { transform: scale(1.14); }
/* Banner sponsorizzato: sovrimpresso come farebbe un vero editor video, non incollato sopra i personaggi. */
.reel__banner {
  position: absolute; z-index: 4; max-width: 62%;
  display: flex; flex-direction: column; gap: 0.15rem;
  background: rgba(244, 239, 226, 0.96); border: 2.5px solid var(--ink); border-radius: 6px;
  padding: 0.4rem 0.65rem; box-shadow: 3px 3px 0 rgba(13, 13, 13, 0.5);
}
.reel__banner-tag { font-family: 'Poppins', sans-serif; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pink); }
.reel__banner-name { font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 800; color: var(--ink); line-height: 1.15; overflow-wrap: anywhere; }
.reel__bars { position: absolute; top: 0.8rem; left: 0.8rem; right: 0.8rem; z-index: 6; display: flex; gap: 0.3rem; }
.reel__bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.45); overflow: hidden; }
.reel__bar i { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.reel__bar.is-done i { transform: scaleX(1); }
.reel__bar.is-active i { animation: fill var(--beat, 3.4s) linear forwards; }
.reel.is-paused .reel__bar.is-active i { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }

.reel__speaker {
  display: table; margin: 0 auto 0.45rem; text-shadow: none; font-family: "Poppins", sans-serif; line-height: 1.3;
  background: var(--ink); color: #fff; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem; border-radius: 3px; white-space: nowrap;
}
/* Il fotogramma di sfondo ha già una sua didascalia stampata in basso: la nostra
   nuova battuta (con il prodotto) va sopra quella zona, su una fascia scura. */
.reel__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 3.2rem 0.9rem 1.1rem;
  background: linear-gradient(transparent, rgba(13, 13, 13, 0.92) 55%);
  font-family: 'Bangers', cursive; font-weight: 400; text-align: center; text-transform: uppercase;
  font-size: clamp(1.15rem, 5.6vw, 1.5rem); line-height: 1.1; letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}
.reel__caption.is-in { animation: pop 0.38s var(--ease-out); }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
[data-pos="top"] .reel__caption { top: 0; bottom: auto; padding: 1.1rem 0.9rem 3.2rem; background: linear-gradient(rgba(13, 13, 13, 0.92) 45%, transparent); }
[data-pos="center"] .reel__caption { top: 38%; bottom: auto; padding: 1.1rem 0.9rem; background: rgba(13, 13, 13, 0.92); }
.reel__end {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem;
  background: rgba(13, 13, 13, 0.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); text-align: center;
}
.reel__end[hidden] { display: none; }
.reel__end-title { font-family: 'Bangers', cursive; font-size: 1.9rem; line-height: 1.05; letter-spacing: 0.03em; color: var(--yellow); }
.reel__tap { position: absolute; top: 0; bottom: 0; z-index: 7; }
.reel__tap--prev { left: 0; width: 32%; }
.reel__tap--next { right: 0; width: 68%; }
.reel__tap:focus-visible { outline-offset: -6px; }

/* ===== Formati (tab) ===== */
.formats__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.2rem 0.2rem 0.9rem; margin: 0 -0.2rem; }
.formats__tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; min-height: 2.9rem; padding: 0.55rem 1rem;
  font-weight: 800; font-size: 0.95rem; white-space: nowrap;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--radius);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s;
}
.tab[aria-selected="true"] { background: var(--yellow); box-shadow: var(--shadow-sm); transform: translate(-1px, -1px); }
.format { display: grid; background: #fff; border: var(--line); box-shadow: var(--shadow); overflow: hidden; }
.format[hidden] { display: none; }
.format.is-in { animation: slidein 0.4s var(--ease-out); }
@keyframes slidein { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.format__art { position: relative; height: 15rem; border-bottom: var(--line); display: flex; justify-content: flex-end; align-items: flex-start; overflow: hidden; padding-right: 10%; }
.format__art img { height: 20rem; width: auto; margin-top: 1.2rem; }
.format__art--pink { background: var(--pink); }
.format__art--green { background: #7FD39E; }
/* Fotogramma vero + banner sovrimpresso: la stessa tecnica del Reel demo, non un adesivo appoggiato sopra il disegno. */
.format__art--frame { padding-right: 0; align-items: stretch; justify-content: stretch; }
.format__frame-bg { width: 100% !important; height: 100% !important; margin-top: 0 !important; object-fit: cover; object-position: center 25%; }
.format__frame-banner {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2; max-width: 62%;
  display: flex; flex-direction: column; gap: 0.15rem;
  background: rgba(244, 239, 226, 0.96); border: 2.5px solid var(--ink); border-radius: 6px;
  padding: 0.5rem 0.75rem; box-shadow: 3px 3px 0 rgba(13, 13, 13, 0.5);
}
.format__frame-tag { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pink); }
.format__frame-name { font-size: 1.05rem; font-weight: 800; color: var(--ink); line-height: 1.15; }
.format__sticker {
  position: absolute; top: 1rem; left: 1rem; max-width: 60%;
  font-family: 'Bangers', cursive; font-size: 1.5rem; line-height: 1; letter-spacing: 0.03em;
  background: var(--yellow); border: var(--line); padding: 0.35rem 0.6rem 0.2rem; transform: rotate(-4deg); box-shadow: var(--shadow-sm);
}

.format__body { padding: 1.4rem 1.25rem 1.6rem; }
.format__body p { color: var(--ink-soft); font-weight: 500; margin-bottom: 1rem; max-width: 60ch; }
.ticks { list-style: none; display: grid; gap: 0.55rem; }
.ticks li { position: relative; padding-left: 1.9rem; font-weight: 700; font-size: 0.95rem; line-height: 1.4; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 0.05rem; width: 1.25rem; height: 1.25rem;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0D0D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 72% no-repeat;
  border: 2px solid var(--ink); border-radius: 3px;
}

/* ===== Pubblico ===== */
.audience { display: grid; gap: 0.9rem; }
.aud { background: #fff; color: var(--ink); border: var(--line); box-shadow: var(--shadow); padding: 1.1rem 1.1rem 1.3rem; }
.aud__title { font-family: 'Bangers', cursive; font-size: 1.5rem; letter-spacing: 0.03em; margin-bottom: 0.8rem; font-weight: 400; }
.split { display: flex; height: 2.6rem; border: var(--line); overflow: hidden; }
.split span { display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; white-space: nowrap; overflow: hidden; }
.split__f { background: var(--pink); color: #fff; }
.split__m { background: var(--blue); color: #fff; border-left: var(--line); }
.bars { display: grid; gap: 0.45rem; }
.bars__row { display: grid; grid-template-columns: 3.4rem 1fr 3rem; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.85rem; }
.bars__track { height: 1rem; border: 2px solid var(--ink); background: var(--cream); }
.bars__fill { height: 100%; background: var(--yellow); border-right: 2px solid var(--ink); transform-origin: left; }
.bars__val { text-align: right; }
.cities { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cities li { border: 2px solid var(--ink); padding: 0.3rem 0.7rem; font-weight: 800; font-size: 0.88rem; background: var(--cream); }

/* ===== Striscia "come funziona" ===== */
.strip { list-style: none; display: grid; gap: 0.9rem; margin-top: 1.6rem; }
.strip__panel { position: relative; background: #fff; border: var(--line); box-shadow: var(--shadow); padding: 1.1rem 1.1rem 1.2rem 4.4rem; min-height: 6rem; }
.strip__panel--hot { background: var(--yellow); }
.strip__n {
  position: absolute; left: 1rem; top: 1rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  font-family: 'Bangers', cursive; font-size: 1.6rem; background: var(--ink); color: var(--yellow); border-radius: 50%;
}
.strip__title { font-family: 'Bangers', cursive; font-weight: 400; font-size: 1.55rem; letter-spacing: 0.03em; line-height: 1.05; margin-bottom: 0.25rem; }
.strip__panel p { font-weight: 500; font-size: 0.95rem; color: var(--ink-soft); }

/* ===== CTA finale ===== */
.final { overflow: hidden; }
.final__inner { display: grid; gap: 1rem; align-items: end; }
.final__madre { height: 15rem; width: auto; justify-self: center; margin-bottom: -4rem; order: 2; }
.copy {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.3rem; max-width: 100%;
  font-weight: 700; font-size: 0.92rem; color: var(--cream);
  border-bottom: 2px dashed var(--yellow); padding-bottom: 0.15rem; overflow-wrap: anywhere; text-align: left;
}
.copy.is-done { color: var(--yellow); }

.footer { background: var(--ink); color: #B9B3A6; padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 0.85rem; font-weight: 600; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem; margin-bottom: 0.8rem; }
.footer__links a { color: var(--cream); text-decoration: none; padding: 0.3rem 0; }
.footer__links a:hover { color: var(--yellow); text-decoration: underline; }

/* ===== Dock mobile ===== */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: 0.6rem; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--dark); border-top: var(--line);
  transform: translateY(110%); transition: transform 0.35s var(--ease-out);
}
.dock.is-on { transform: none; }
.dock .btn { flex: 1; min-height: 2.9rem; padding: 0.6rem 1rem; box-shadow: none; }
.dock .btn--ghost { flex: 0 0 34%; }

/* ===== Entrata (una sola, a partire da stato già visibile) ===== */
.js .reveal { opacity: 0.001; transform: translateY(18px) rotate(-0.4deg); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ===== Tablet / desktop ===== */
@media (min-width: 640px) {
  .board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cell--hero { grid-column: span 2; grid-row: span 2; }
  .cell--wide { grid-column: span 4; }
  .cell__trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .cell__trio > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .cell__trio > div + div { border-top: 0; padding-top: 0; border-left: 2px dashed rgba(13, 13, 13, 0.25); padding-left: 1.5rem; }
  .cell__trio .cell__value { font-size: 2.4rem; }
  .formats__tabs { flex-wrap: nowrap; }
  .recent__grid--collab { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audience { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail-nav { display: flex; }
}
@media (min-width: 900px) {
  .wrap { padding: 0 2rem; }
  .hero { padding: 2.5rem 2rem 3.5rem; }
  .hero__panel {
    padding: 2.8rem 2.6rem 2.4rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "title cast" "lead cast" "cta cast";
    column-gap: 2rem;
  }
  .hero__title { font-size: clamp(4.4rem, 7.4vw, 6rem); }
  .hero__cast { margin: 0 -1rem -2.4rem 0; min-height: 30rem; align-self: stretch; align-items: end; }
  .hero__pino { height: 29rem; margin-left: -1rem; }
  .bubble { font-size: 1.05rem; align-self: start; margin-top: 1.5rem; }
  .bubble::after { top: 60%; }
  .bubble__num { font-size: 2.8rem; }
  .cta-row .btn { flex: 0 1 auto; }
  .ticker { margin-inline: -2rem; }
  .section { padding: 6.5rem 0 6rem; }
  .rail { padding-inline: max(2rem, calc((100vw - 72rem) / 2 + 2rem)); scroll-padding-inline: max(2rem, calc((100vw - 72rem) / 2 + 2rem)); }
  .ep { flex-basis: 17.5rem; }
  .prova { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy phone" "cta phone"; column-gap: 4rem; row-gap: 1.8rem; align-items: end; }
  .prova__cta { align-self: start; }
  .prova__cta .btn { width: auto; }
  .phone { width: 22rem; rotate: 2deg; }
  .format { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .format__art { border-bottom: 0; border-right: var(--line); height: auto; min-height: 24rem; justify-content: center; padding-right: 0; }
  .format__art img { height: 26rem; margin-top: 5rem; }
  .format__art--frame { min-height: 0; }
  .format__frame-bg { height: 100% !important; margin-top: 0 !important; }
  .format__body { padding: 2.2rem 2.2rem 2.4rem; align-self: center; }
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip__panel { padding: 4.2rem 1.2rem 1.3rem; }
  .strip__panel:nth-child(even) { translate: 0 1.2rem; }
  .final__inner { grid-template-columns: auto minmax(0, 1fr); gap: 3rem; align-items: center; }
  .final__madre { order: 0; height: 24rem; margin-bottom: -6.5rem; }
  .dock { display: none; }
  body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .ticker__track { animation: none; flex-wrap: wrap; width: auto; }
  .ticker__track [aria-hidden="true"] { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}
.ep--live .ep__stats { margin-bottom: 0.55rem; }
.ep--live .ep__badge { top: 1.4rem; }

/* ===== Ritocchi v3 ===== */
/* Banner demo fisso a 3/4 dello schermo: le battute stanno sempre sopra. */
.reel__banner { top: 75%; left: 50%; right: auto; transform: translateX(-50%) rotate(-2deg); max-width: 78%; text-align: center; align-items: center; }
[data-pos="bottom"] .reel__caption { bottom: 27%; top: auto; padding: 0.9rem; background: rgba(13, 13, 13, 0.9); }
.reel__prod { color: var(--pink); }
/* Collab: durante la riproduzione il tasto copre tutto il video, così un secondo tocco mette in pausa. */
.clip.is-playing .reel-play { width: auto; height: auto; }
/* Nastro: stessi numeri leggibili della tavola. */
.ticker__item { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: 0.01em; text-transform: uppercase; padding: 0.65rem 1.2rem 0.6rem; }
/* Tavola: blocco grande rosa, record scuro. */
.cell--hero.cell--pink { background: var(--pink); color: #fff; }
.cell--hero.cell--pink .cell__label { color: #FFE3EA; }
.cell--dark { background: var(--dark); color: var(--cream); }
.cell--dark .cell__sub { color: #D9D3C4; }
/* Titoli neri con lo stesso spessore di quelli gialli: contorno + ombra gialla, come l'hero della home. */
.h2:not(.h2--light), .hero__title > span:not(.hero__hl), .h3:not(.h3--light), .strip__title, .fmt__title {
  -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--yellow);
}
.section--yellow .h2 { text-shadow: 3px 3px 0 #fff; }
.h2--light { -webkit-text-stroke: 1px var(--cream); text-shadow: 3px 3px 0 #000; }
/* ===== Formati: tre vignette, personaggio che sborda + balloon (come la hero) ===== */
.fmts { display: grid; gap: 1.6rem; }
.fmt { background: #fff; border: var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.fmt__art { position: relative; height: 15.5rem; border-bottom: var(--line); overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-end; padding-right: 6%; }
.fmt--pink .fmt__art { background: var(--pink); }
.fmt--yellow .fmt__art { background: var(--yellow); }
.fmt--blue .fmt__art { background: #7FB4F0; }
.fmt__char { height: 18rem; width: auto; margin-bottom: -3.8rem; filter: drop-shadow(4px 4px 0 rgba(13, 13, 13, 0.25)); }
.fmt__bubble {
  position: absolute; left: 0.9rem; top: 0.9rem; max-width: 58%; z-index: 2;
  background: #fff; border: var(--line); border-radius: 1.2rem; padding: 0.65rem 0.8rem;
  font-weight: 700; font-size: 0.84rem; line-height: 1.3; box-shadow: var(--shadow-sm);
}
.fmt__bubble::after { content: ''; position: absolute; right: -1rem; top: 55%; width: 1.3rem; height: 1rem; background: #fff; border-top: var(--line); border-right: var(--line); transform: skewY(-28deg); }
.fmt__body { position: relative; padding: 1.4rem 1.2rem 1.5rem; flex: 1; }
.fmt__n { position: absolute; top: -1.35rem; left: 1.1rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.15rem; background: var(--ink); color: var(--yellow); border-radius: 50%; border: 3px solid #fff; }
.fmt__title { font-family: 'Bangers', cursive; font-weight: 400; font-size: 2rem; line-height: 1; letter-spacing: 0.02em; margin: 0.5rem 0 0.6rem; }
.fmt__body p { color: var(--ink-soft); font-weight: 500; font-size: 0.95rem; margin-bottom: 1rem; }
@media (min-width: 900px) {
  .fmts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; align-items: stretch; }
  .fmt:nth-child(2) { translate: 0 1.4rem; }
  .fmt__art { height: 17rem; }
  .fmt__char { height: 20rem; }
}
/* I personaggi hanno altezza fissa: niente max-width, così non si schiacciano mai. */
.hero__pino, .cell__pino, .fmt__char, .final__madre, .ep__img { max-width: none; object-fit: contain; flex-shrink: 0; }
.hero__cast { grid-template-columns: minmax(0, 1fr) max-content; }
/* Trio: spazio anche per valori testuali ("1 ogni 3"). */
.cell__trio > div { grid-template-columns: 8.6rem minmax(0, 1fr); }
.cell__trio .cell__value { font-size: 1.75rem; white-space: nowrap; }
@media (min-width: 640px) { .cell__trio > div { grid-template-columns: 1fr; } .cell__trio .cell__value { font-size: 2.4rem; } }
/* Pubblico */
.aud--big { display: flex; flex-direction: column; justify-content: center; }
.aud__num { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(3.4rem, 16vw, 5rem); line-height: 1; letter-spacing: -0.02em; color: var(--pink); }
.aud__label { font-weight: 700; font-size: 0.95rem; line-height: 1.4; margin-top: 0.5rem; color: var(--ink-soft); }
.aud__note { font-size: 0.78rem; font-weight: 600; color: #6B655A; margin-top: 0.8rem; }
.bars--cities .bars__row { grid-template-columns: 5.4rem 1fr 3.4rem; }
@media (min-width: 640px) { .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; } }
/* Mobile: il nastro ruotato non deve allargare la pagina (niente scroll orizzontale). */
html, body { overflow-x: clip; }
main { overflow-x: clip; }
.ticker { margin-inline: 0; width: 100%; }
.ticker__track { will-change: transform; backface-visibility: hidden; }
/* Dock: icona + etichetta, due azioni ben distinte. */
.dock .btn { gap: 0.45rem; font-size: 0.95rem; }
.dock .btn--ghost { flex: 0 0 auto; padding-inline: 1rem; }