/* =========================================================
   CalbarTech — página do Control Key
   Usa as cores e medidas do css/style.css (carregar ele antes).
   ========================================================= */

:root {
  --ck: #3DD68C;        /* verde do app Control Key */
  --ck-bg: #0F2A22;
}

/* ---------- Topo da página ---------- */
.ck-hero { padding: 48px 0 64px; }
.ck-hero__text { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ck-back {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; align-self: flex-start;
  font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none;
}
.ck-back:hover { color: var(--white); }
.ck-hero h1 {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  line-height: 1.05; letter-spacing: -1.5px; color: var(--white);
}
.ck-icon {
  flex: none;
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ck-bg); color: var(--ck);
}
.ck-icon svg { width: 28px; height: 28px; }
.ck-hero__tagline { font-family: var(--font-title); font-weight: 600; font-size: 20px; color: var(--cyan); }
.ck-hero__buttons { display: flex; flex-direction: column; gap: 14px; }

.badge--ck { color: var(--ck); background: var(--ck-bg); }

/* ---------- Números rápidos ---------- */
.ck-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ck-stat {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px; display: flex; flex-direction: column; gap: 4px;
}
.ck-stat strong { font-family: var(--font-title); font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--white); }
.ck-stat span { font-size: 14px; color: var(--text); }

/* ---------- Novidades (telas + texto) ---------- */
.ck-features { display: flex; flex-direction: column; gap: 56px; }
.ck-feature { display: grid; gap: 24px; align-items: center; }
.ck-feature__text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ck-feature__kicker { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ck); }
.ck-feature h3 { font-family: var(--font-title); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.4px; color: var(--white); }
.ck-feature p { font-size: 16px; line-height: 1.6; color: var(--text); }
.ck-shot {
  min-width: 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  background: #0B1416;
}
.ck-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* Grade de mais novidades (cards menores) */
.ck-more { display: grid; gap: 20px; margin-top: 56px; }
.ck-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
}
.ck-card .ck-shot { border-radius: 12px; box-shadow: none; }
.ck-card h3 { font-family: var(--font-title); font-weight: 700; font-size: 20px; color: var(--white); padding: 0 6px; }
.ck-card p { font-size: 15px; line-height: 1.6; color: var(--text); padding: 0 6px 6px; }

/* ---------- Configuração em 8 passos (rolagem lateral) ---------- */
.ck-setup {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 0 18px; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--border-2) transparent;
}
.ck-setup figure {
  margin: 0; scroll-snap-align: start;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 12px; display: flex; flex-direction: column; gap: 12px;
}
.ck-setup img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; }
.ck-setup figcaption { display: flex; gap: 10px; align-items: baseline; padding: 0 4px 4px; font-size: 15px; color: var(--text-strong); }
.ck-setup figcaption b { font-family: var(--font-mono); font-weight: 500; color: var(--cyan); flex: none; }
.ck-hint { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- Planos ---------- */
.ck-plans { display: grid; gap: 20px; }
.ck-plan {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 18px;
}
.ck-plan--pro { border-color: var(--blue); background: var(--card-2); }
.ck-plan__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ck-plan h3 { font-family: var(--font-title); font-weight: 700; font-size: 26px; color: var(--white); }
.ck-plan__price { font-family: var(--font-title); font-weight: 700; font-size: 36px; line-height: 1; color: var(--white); }
.ck-plan__price small { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--text); }
.ck-plan .btn { margin-top: auto; }
.ck-note { margin-top: 20px; font-size: 15px; color: var(--text); }

/* =========================================================
   Telas maiores
   ========================================================= */
@media (min-width: 600px) {
  .ck-hero__buttons { flex-direction: row; flex-wrap: wrap; }
  .ck-stats { grid-template-columns: repeat(4, 1fr); }
  .ck-setup { grid-auto-columns: 46%; }
  .ck-more { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 760px) {
  .ck-plans { grid-template-columns: 1fr 1fr; }
  .ck-plan { padding: 36px; }
}

@media (min-width: 960px) {
  .ck-hero { padding: 72px 0 96px; }

  .ck-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 56px; }
  .ck-feature--rev .ck-feature__text { order: 2; }
  .ck-feature h3 { font-size: 30px; }
  .ck-feature p { font-size: 17px; }

  .ck-more { grid-template-columns: repeat(3, 1fr); }
  .ck-setup { grid-auto-columns: 31%; }
}

/* =========================================================
   Topo curto (a TV faz o papel da imagem grande)
   ========================================================= */
.ck-hero--short { padding: 32px 0 8px; }
.ck-hero--short .ck-hero__text { gap: 16px; }
.ck-hero--short .ck-back { margin-bottom: -4px; }

/* =========================================================
   A história: TV parada + capítulos rolando
   ========================================================= */
.ck-story-section { padding-top: 40px; }
.ck-only-lg { display: none; }

.ck-story { display: grid; gap: 20px; }

/* Celular: TV presa no topo, logo abaixo do menu */
.ck-story__tv {
  position: sticky; top: var(--header-h); z-index: 10;
  margin: 0 calc(var(--gutter) * -1);
  padding: 8px var(--gutter) 16px;
  background: linear-gradient(var(--bg) 86%, rgba(7, 12, 26, 0));
}
/* nunca passa de ~40% da altura da tela */
.ck-story__tv .cktv { max-width: calc((40svh - 92px) * 1.6 + 24px); margin: 0 auto; }

.ck-chapters { display: flex; flex-direction: column; gap: 16px; }
.ck-chapter {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 20px 22px;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.ck-chapter.is-on-tv { border-color: rgba(61, 214, 140, .55); box-shadow: 0 0 0 1px rgba(61, 214, 140, .15); }
.ck-chapter__top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.ck-chapter__num {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--ck);
}
.ck-chapter.is-on-tv .ck-chapter__num::after { content: " · " attr(data-live); color: var(--muted); }
.ck-chapter h3 { font-family: var(--font-title); font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--white); }
.ck-chapter p { font-size: 16px; line-height: 1.65; color: var(--text); }
.ck-chapter strong { color: var(--text-strong); font-weight: 600; }

.ck-tvbtn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--border-2); border-radius: 10px; background: transparent;
  font: 500 12px/1 var(--font-mono); color: var(--muted); cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.ck-tvbtn:hover, .ck-chapter.is-on-tv .ck-tvbtn { color: var(--ck); border-color: rgba(61, 214, 140, .55); }
.ck-tvbtn span { color: var(--text-strong); }

.ck-chapter__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 0; }
.ck-chapter__shots img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: 8px; border: 1px solid var(--border); background: #fff;
}
.ck-chapter .ck-chapter__note { font-size: 12px; line-height: 1.4; color: var(--muted); }

.ck-ideas { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--text); }
.ck-ideas li { display: flex; gap: 10px; }
.ck-ideas li::before { flex: none; font-weight: 700; }
.ck-ideas .is-ok::before { content: "✓"; color: var(--ck); }
.ck-ideas .is-no::before { content: "✗"; color: var(--red); }

.ck-chapter--now { border-color: var(--blue); background: var(--card-2); }

/* =========================================================
   TV — visual VHS anos 2000
   ========================================================= */
.cktv { --tv-green: #3DD68C; position: relative; width: 100%; }

.cktv-body {
  background: linear-gradient(180deg, #151C30 0%, #0B1020 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 8px 0;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.cktv-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #04070E;
  container-type: inline-size;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
/* linhas de varredura (bem leves) */
.cktv-screen::before {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  opacity: .55;
}
/* cantos mais escuros, como tela de tubo */
.cktv-screen::after {
  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 50%, transparent 62%, rgba(0, 0, 0, .5));
}

/* ---------- HUD: PLAY e contador ---------- */
.cktv-hud {
  position: absolute; z-index: 4; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; gap: 8px;
  padding: 2.4cqw 3cqw;
  font: 500 clamp(9px, 2.5cqw, 15px)/1 var(--font-mono);
  color: #fff; letter-spacing: .06em;
  text-shadow: 1px 0 rgba(255, 59, 78, .55), -1px 0 rgba(34, 211, 238, .55);
  transition: opacity .3s ease;
}

/* ---------- faixa do capítulo ---------- */
.cktv-band {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  padding: 2.2cqw 3cqw 1.8cqw;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78) 40%);
  font: 500 clamp(9px, 2.4cqw, 14px)/1.2 var(--font-mono);
  color: var(--text-strong); letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .3s ease;
}
.cktv-band::before {
  content: ''; display: inline-block; width: .6em; height: .6em; margin-right: .6em;
  background: var(--tv-green); border-radius: 1px;
}
.is-hud-off .cktv-hud, .is-hud-off .cktv-band { opacity: 0; }

/* ---------- palco das cenas ---------- */
.cktv-stage { position: absolute; z-index: 1; inset: 8.5cqw 4cqw; }
.cktv-view {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  animation: cktv-fade .45s ease both;
}
.cktv-view.is-out { animation: cktv-fadeout .35s ease both; }
.cktv-view--full { inset: -8.5cqw -4cqw; }

/* efeitos de fita (glitch e rebobinar) */
.cktv-fx { position: absolute; z-index: 3; inset: -40% 0; pointer-events: none; opacity: 0; }
.is-glitch .cktv-stage { animation: cktv-glitch .45s steps(2) both; }
.is-glitch .cktv-fx {
  opacity: 1;
  background: linear-gradient(to bottom, transparent 0 42%, rgba(255, 255, 255, .16) 42% 44%, transparent 44% 66%, rgba(34, 211, 238, .16) 66% 67%, transparent 67%);
  animation: cktv-bar .45s steps(3) both;
}
.is-rewind .cktv-stage { animation: cktv-jitter .14s steps(2) infinite; }
.is-rewind .cktv-fx {
  opacity: 1;
  background: repeating-linear-gradient(to bottom, transparent 0 9%, rgba(255, 255, 255, .13) 9% 10.2%, transparent 10.2% 17%);
  animation: cktv-track .3s linear infinite;
}

/* ---------- abertura e final ---------- */
.cktv-view--blue { background: #1638D0; align-items: flex-start; justify-content: flex-start; }
.cktv-blue-osd {
  margin: 6cqw 0 0 6cqw;
  font: 500 clamp(14px, 5cqw, 34px)/1 var(--font-mono);
  color: #fff; letter-spacing: .08em;
  text-shadow: .3cqw .3cqw 0 rgba(0, 0, 0, .35);
}
.cktv-view--title, .cktv-view--end {
  background: radial-gradient(80% 75% at 50% 42%, #0F1D44, #04070E 72%);
  gap: 1.8cqw; padding: 0 6cqw; text-align: center;
}
.cktv-title {
  font: 700 clamp(18px, 8.4cqw, 64px)/1 var(--font-title);
  color: #fff; letter-spacing: .04em;
  text-shadow: .35cqw 0 rgba(255, 59, 78, .55), -.35cqw 0 rgba(34, 211, 238, .55);
  animation: cktv-title-in 1.2s ease both;
}
.cktv-title--end { font-size: clamp(16px, 6.6cqw, 52px); }
.cktv-sub { font: 500 clamp(9px, 2.6cqw, 16px)/1.2 var(--font-mono); color: var(--cyan); letter-spacing: .42em; }
.cktv-sub--green { color: var(--tv-green); letter-spacing: .2em; }
.cktv-slogan {
  min-height: 1.3em; margin-top: 1.6cqw;
  font: 600 clamp(11px, 3.4cqw, 22px)/1.3 var(--font-title); color: var(--text-strong);
  opacity: 0; transition: opacity .8s ease;
}
.cktv-slogan.is-in { opacity: 1; }
.cktv-view--rewind { background: #04070E; }
.cktv-flip {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.55) contrast(1.15) brightness(.7); transform: skewX(-4deg) scale(1.1);
}
.cktv-rew {
  position: relative; font: 700 clamp(22px, 11cqw, 80px)/1 var(--font-mono);
  color: #fff; letter-spacing: -.08em; text-shadow: .5cqw 0 rgba(255, 59, 78, .6), -.5cqw 0 rgba(34, 211, 238, .6);
}

/* ---------- cena: chat ---------- */
.cktv-view--chat { justify-content: flex-end; align-items: stretch; gap: 1.6cqw; padding: 0 2cqw; overflow: hidden; }
.cktv-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 80%; animation: cktv-pop .35s ease both; }
.cktv-msg--ruan { align-self: flex-end; align-items: flex-end; }
.cktv-msg--ia { align-self: flex-start; }
.cktv-who {
  margin: 0 .5em .35em;
  font: 500 clamp(8px, 1.9cqw, 12px)/1 var(--font-mono);
  color: var(--muted); letter-spacing: .1em; text-transform: uppercase;
}
.cktv-msg--ia .cktv-who { color: var(--tv-green); }
.cktv-bubble {
  padding: .6em .85em; border-radius: 1em;
  font: 500 clamp(10px, 3cqw, 18px)/1.35 var(--font-body); color: #fff;
}
.cktv-msg--ruan .cktv-bubble { background: var(--blue); border-bottom-right-radius: .25em; }
.cktv-msg--ia .cktv-bubble { background: #0F1830; border: 1px solid var(--border-2); border-bottom-left-radius: .25em; color: var(--text-strong); }
.cktv-msg.is-typing .cktv-bubble i {
  display: inline-block; width: .42em; height: .42em; margin: 0 .12em;
  border-radius: 50%; background: currentColor; opacity: .3;
  animation: cktv-dot 1s ease-in-out infinite;
}
.cktv-msg.is-typing .cktv-bubble i:nth-child(2) { animation-delay: .15s; }
.cktv-msg.is-typing .cktv-bubble i:nth-child(3) { animation-delay: .3s; }

/* ---------- cena: código ---------- */
.cktv-code { width: 100%; max-width: 86cqw; background: #0A0F1F; border: 1px solid var(--border); border-radius: 1.4cqw; overflow: hidden; }
.cktv-code-tab {
  display: flex; align-items: center; gap: .5em; padding: .55em 1em;
  border-bottom: 1px solid var(--border);
  font: 500 clamp(8px, 1.9cqw, 12px)/1 var(--font-mono); color: var(--muted);
}
.cktv-code-tab i { width: .7em; height: .7em; border-radius: 50%; background: #FF3B4E; }
.cktv-code-tab i:nth-child(2) { background: #F5B84A; }
.cktv-code-tab i:nth-child(3) { background: var(--tv-green); margin-right: .5em; }
.cktv-code pre {
  margin: 0; padding: 1em 1.3em; min-height: 13.5em;
  font: 500 clamp(9px, 2.5cqw, 15px)/1.5 var(--font-mono); color: var(--text-strong);
  white-space: pre; overflow: hidden;
}
.tk-k { color: #C792EA; }
.tk-t { color: var(--cyan); }
.tk-c { color: var(--muted); font-style: italic; }
.tk-p { color: var(--text); }
.tk-v { color: #FFB86B; border-radius: 3px; transition: background-color .3s ease; }
.tk-v.is-sel { background: rgba(48, 106, 255, .55); color: #fff; }
.tk-v.is-new { color: var(--tv-green); background: rgba(61, 214, 140, .18); }
.cktv-caret::after, .cktv .is-typing::after { content: '▌'; margin-left: 1px; animation: cktv-blink .8s steps(1) infinite; }

/* ---------- cena: terminal ---------- */
.cktv-term {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  background: #060A14; border: 1px solid var(--border); border-radius: 1.4cqw;
  padding: 1.6cqw 2.2cqw;
  font: 500 clamp(9px, 2.5cqw, 15px)/1.5 var(--font-mono);
}
.cktv-term-cmd { color: var(--muted); }
.cktv-term-lines { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.cktv-bug, .cktv-fix { display: flex; gap: .6em; }
.cktv-bug { color: var(--red); transition: color .4s ease; }
.cktv-bug.is-fixed { color: #66739A; }
.cktv-bug.is-fixed .cktv-bug-text { text-decoration: line-through; }
.cktv-bug.is-fixed .cktv-bug-mark { color: var(--tv-green); }
.cktv-fix { color: var(--tv-green); padding-left: 1.2em; }
.cktv-fix-mark { flex: none; }
.cktv-term-done { margin-top: .4em; color: var(--cyan); animation: cktv-pop .35s ease both; }

/* ---------- cena: caderno ---------- */
.cktv-view--notebook { align-items: flex-start; }
.cktv-notebook {
  position: relative; width: 56cqw; margin-left: 3cqw;
  padding: 2.2cqw 3cqw 2.4cqw 7cqw;
  background: #F3EAD2; color: #1D2A6B; border-radius: .8cqw;
  transform: rotate(-2.5deg);
  box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .5);
  font: 500 clamp(10px, 3cqw, 18px)/1.5 var(--font-body); font-style: italic;
}
.cktv-notebook::before { content: ''; position: absolute; top: 0; bottom: 0; left: 4.8cqw; width: 2px; background: rgba(198, 47, 60, .55); }
.cktv-nb-head { margin-bottom: .4em; font: 500 clamp(8px, 2cqw, 12px)/1.2 var(--font-mono); font-style: normal; letter-spacing: .08em; color: #5A6390; }
.cktv-notebook li { position: relative; min-height: 1.6em; border-bottom: 1px solid rgba(48, 106, 255, .28); }
.cktv-notebook s {
  position: absolute; left: -.2em; right: -.2em; top: 50%; height: .14em;
  background: #C62F3C; border-radius: 2px; transform: scaleX(0); transform-origin: left;
}
.cktv-notebook li.is-alert { color: #C62F3C; font-weight: 600; }
.cktv-speech {
  position: absolute; top: 1cqw; right: 1cqw; max-width: 36cqw;
  padding: .7em .9em; border-radius: 1em; border-bottom-left-radius: .2em;
  background: #fff; color: #0B1020;
  font: 600 clamp(10px, 2.9cqw, 18px)/1.3 var(--font-title);
  box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, .5);
  transform-origin: bottom left;
  animation: cktv-speech .45s cubic-bezier(.2, 1.4, .4, 1) both;
}

/* ---------- cena: tela do app ---------- */
.cktv-shot {
  width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0;
  border-radius: 1cqw; box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, .6);
  animation: cktv-zoom 1s ease both;
}
.cktv-note {
  position: absolute; right: 0; bottom: 0;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(4, 7, 14, .8);
  font: 400 11px/1.3 var(--font-body); color: var(--muted);
}

/* ---------- cena: ideias ✓ / ✗ ---------- */
.cktv-view--idea { gap: 4.4cqw; }
.cktv-key { position: relative; width: 20cqw; }
.cktv-key-face { border-radius: 2.6cqw; overflow: hidden; }
.cktv-key svg { display: block; width: 100%; height: auto; }
.cktv-tri { fill: var(--tv-green); transition: fill .6s ease; }
.is-split .cktv-tri--b { fill: #23905D; }
.cktv-diag { stroke: #04140C; stroke-width: 2.4; stroke-dasharray: 142; stroke-dashoffset: 142; }
.cktv-key-n { font: 700 24px var(--font-title); fill: #04140C; }
.cktv-key-n--b { font-size: 17px; opacity: 0; transition: opacity .6s ease; }
.is-split .cktv-key-n--b { opacity: .75; }
.cktv-tag {
  position: absolute; white-space: nowrap;
  font: 500 clamp(8px, 2cqw, 12px)/1 var(--font-mono); color: var(--tv-green); letter-spacing: .06em;
  opacity: 0; transition: opacity .6s ease;
}
.cktv-tag--a { right: calc(100% + 1.4cqw); top: 18%; }
.cktv-tag--b { left: calc(100% + 1.4cqw); bottom: 18%; color: #6FD9A6; }
.is-split .cktv-tag { opacity: 1; }
.cktv-key.is-halo { filter: drop-shadow(0 0 1cqw rgba(61, 214, 140, .9)) drop-shadow(0 0 2.6cqw rgba(34, 211, 238, .55)); animation: cktv-halo 1.4s ease-in-out infinite alternate; }

.cktv-idea-cap {
  display: flex; align-items: center; justify-content: center; gap: 1.6cqw; min-height: 2.6em;
  font: 500 clamp(9px, 2.5cqw, 15px)/1.3 var(--font-mono); color: var(--text-strong); letter-spacing: .03em; text-align: center;
}
.cktv-stamp {
  display: inline-grid; place-items: center; flex: none;
  width: 2em; height: 2em; border-radius: 50%;
  border: .16em solid currentColor; font-weight: 700; line-height: 1;
  transform: rotate(-12deg);
  animation: cktv-stamp .4s cubic-bezier(.2, 1.6, .4, 1) both;
}
.cktv-stamp--ok { color: var(--tv-green); }
.cktv-stamp--no { color: var(--red); }
.cktv-stamp--big { position: absolute; top: -2.4cqw; right: -2.4cqw; font-size: clamp(14px, 4.6cqw, 30px); background: rgba(4, 7, 14, .9); }

.cktv-minis { display: flex; gap: 2.6cqw; }
.cktv-mini {
  position: relative; display: grid; place-items: center;
  width: 12cqw; height: 12cqw; border-radius: 1.8cqw;
  background: var(--tv-green); color: #04140C;
  font: 700 clamp(11px, 3.6cqw, 24px)/1 var(--font-title);
}
.cktv-mini i {
  position: absolute; top: -1cqw; right: -1cqw;
  width: 3.4cqw; height: 3.4cqw; border-radius: 50%;
  background: var(--c); border: .5cqw solid #04070E;
  transform: scale(0); transition: transform .35s cubic-bezier(.2, 1.6, .4, 1);
}
.cktv-mini i.is-on { transform: scale(1); }

.cktv-card {
  position: relative; width: 100%; max-width: 70cqw;
  padding: 2cqw 2.4cqw; border-radius: 1.6cqw;
  background: #0F1830; border: 1px solid var(--border-2);
}
.cktv-card-title { font: 500 clamp(8px, 2cqw, 12px)/1.2 var(--font-mono); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.cktv-marquee {
  margin-top: 1.4cqw; padding: .5em 0; overflow: hidden; white-space: nowrap;
  border-radius: .8cqw; background: var(--tv-green); color: #04140C;
  font: 500 clamp(9px, 2.6cqw, 16px)/1 var(--font-mono);
  transition: opacity .4s ease, filter .4s ease;
}
.cktv-marquee-in { display: inline-block; animation: cktv-marq 7s linear infinite; }
.cktv-marquee.is-no { opacity: .4; filter: grayscale(1); }
.cktv-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.4cqw;
  padding: .9cqw 0; border-bottom: 1px solid var(--border);
  font: 500 clamp(9px, 2.5cqw, 15px)/1.2 var(--font-body); color: var(--text-strong);
  animation: cktv-pop .35s ease both;
}
.cktv-row:last-child { border-bottom: 0; }
.cktv-chip { padding: .25em .5em; border-radius: .6cqw; background: #4A1D12; color: #FFB4A0; font-family: var(--font-mono); }
.cktv-row time { font-family: var(--font-mono); font-size: .85em; color: var(--muted); }

/* ---------- moldura de baixo: LED, fita e botão ---------- */
.cktv-deck { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 0 4px 6px; }
.cktv-led { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tv-green); box-shadow: 0 0 8px var(--tv-green); transition: background-color .3s ease, box-shadow .3s ease; }
.cktv.is-paused .cktv-led { background: #F5B84A; box-shadow: 0 0 8px rgba(245, 184, 74, .8); }
.cktv-reels { display: inline-flex; gap: 6px; padding: 4px 7px; border: 1px solid var(--border-2); border-radius: 5px; background: #070B16; }
.cktv-reels i { width: 12px; height: 12px; border-radius: 50%; border: 2px dotted var(--muted); animation: cktv-spin 2.4s linear infinite; }
.cktv-brand { margin-right: auto; font: 500 10px/1 var(--font-mono); color: var(--muted); letter-spacing: .18em; white-space: nowrap; }
.cktv-btn {
  display: inline-grid; place-items: center; min-width: 48px; min-height: 44px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--border-2);
  background: linear-gradient(#141C33, #0B1122); color: var(--text-strong);
  font: 500 15px/1 var(--font-mono); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 0 #05080F;
  transition: color .2s ease, border-color .2s ease;
}
.cktv-btn:hover { color: var(--tv-green); border-color: var(--tv-green); }
.cktv-btn:active { transform: translateY(1px); }

/* pausado: congela tudo que se mexe */
.cktv.is-paused .cktv-screen *, .cktv.is-paused .cktv-screen *::before, .cktv.is-paused .cktv-screen *::after,
.cktv.is-paused .cktv-reels i { animation-play-state: paused !important; }

/* ---------- animações ---------- */
@keyframes cktv-fade { from { opacity: 0; } }
@keyframes cktv-fadeout { to { opacity: 0; } }
@keyframes cktv-zoom { from { opacity: 0; transform: scale(1.05); } }
@keyframes cktv-pop { from { opacity: 0; transform: translateY(.8cqw) scale(.97); } }
@keyframes cktv-speech { from { opacity: 0; transform: scale(.4); } }
@keyframes cktv-stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.9); } }
@keyframes cktv-dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-.25em); } }
@keyframes cktv-blink { 50% { opacity: 0; } }
@keyframes cktv-title-in { from { opacity: 0; letter-spacing: .3em; filter: blur(4px); } }
@keyframes cktv-halo { to { filter: drop-shadow(0 0 1.6cqw rgba(61, 214, 140, 1)) drop-shadow(0 0 3.6cqw rgba(34, 211, 238, .75)); } }
@keyframes cktv-marq { to { transform: translateX(-50%); } }
@keyframes cktv-spin { to { transform: rotate(360deg); } }
@keyframes cktv-bar { from { transform: translateY(-25%); } to { transform: translateY(25%); } }
@keyframes cktv-track { to { transform: translateY(17%); } }
@keyframes cktv-jitter { 50% { transform: translateX(.6%); } }
@keyframes cktv-glitch {
  20% { transform: translateX(-1.6%) skewX(-5deg); filter: hue-rotate(50deg) saturate(2); }
  40% { transform: translateX(1.2%); clip-path: inset(12% 0 52% 0); }
  60% { transform: translateX(-.6%); clip-path: inset(48% 0 18% 0); }
  80% { transform: translateX(.4%); }
}

/* "reduzir movimento": sem digitação, sem glitch; só troca com fade */
@media (prefers-reduced-motion: reduce) {
  .cktv-screen *, .cktv-screen *::before, .cktv-screen *::after, .cktv-reels i { animation: none !important; }
  .cktv-screen .cktv-view { animation: cktv-fade .5s ease both !important; }
  .cktv-screen .cktv-view.is-out { animation: cktv-fadeout .35s ease both !important; }
}

/* =========================================================
   História — telas maiores
   ========================================================= */
@media (min-width: 600px) {
  .cktv-body { border-radius: 22px; padding: 12px 12px 0; }
  .cktv-screen { border-radius: 14px; }
  .cktv-deck { min-height: 56px; padding: 6px 2px 6px 8px; }
  .ck-chapter { padding: 26px 28px 28px; }
}

@media (min-width: 960px) {
  .ck-hero--short { padding: 56px 0 8px; }
  .ck-story-section { padding-top: 56px; }
  .ck-only-lg { display: inline; }
  .ck-only-sm { display: none; }

  /* Computador: TV parada à esquerda (~45%), capítulos rolando à direita */
  .ck-story { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 48px; align-items: start; }
  .ck-story__tv {
    top: calc(var(--header-h) + 28px);
    margin: 0; padding: 0; background: none;
  }
  .ck-story__tv .cktv { max-width: none; }
  .ck-chapters { gap: 24px; }
  .ck-chapter h3 { font-size: 24px; }
  .ck-chapter p, .ck-ideas { font-size: 17px; }
}