@import url("citadel-case.css?v=20261001b");

:root {
  --ct-bg: #050306;
  --ct-panel: #10090e;
  --ct-panel-2: #15101a;
  --ct-text: #fff8f5;
  --ct-muted: #b7aeb6;
  --ct-line: rgba(255,255,255,.13);
  --ct-red: #e50914;
  --ct-cyan: #78b8e3;
  --st-ember: #ff6b1a;
}

body::selection { background: var(--ct-red); color: #fff; }

.ct-hero {
  background:
    radial-gradient(circle at 76% 25%, rgba(64,142,209,.19), transparent 31%),
    radial-gradient(circle at 17% 73%, rgba(229,9,20,.18), transparent 34%),
    radial-gradient(circle at 43% 100%, rgba(255,107,26,.08), transparent 27%),
    var(--ct-bg);
}
.ct-hero::before { background: linear-gradient(90deg, transparent, rgba(229,9,20,.42), rgba(120,184,227,.35), transparent); }
.ct-gridlines {
  opacity: .16;
  background-image: linear-gradient(rgba(229,9,20,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(120,184,227,.13) 1px, transparent 1px);
}
.ct-chip { border-color: rgba(229,9,20,.5); color: #fff; }
.ct-chip::before { background: var(--ct-red); box-shadow: 0 0 16px var(--ct-red); }
.ct-hero h1 { font-size: clamp(56px, 7vw, 102px); }
.ct-hero h1 span { -webkit-text-stroke-color: rgba(229,9,20,.62); }
.ct-button--primary { border-color: var(--ct-red); background: var(--ct-red); box-shadow: 0 16px 44px rgba(229,9,20,.28); }

.ct-screen { border-color: rgba(229,9,20,.38); box-shadow: 0 40px 100px rgba(0,0,0,.65), 0 0 86px rgba(83,145,207,.1); }
.ct-screen-frame {
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  background: linear-gradient(110deg, #45120f, #111324 53%, #122d46);
}
.ct-screen-frame::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -28px;
  background: linear-gradient(rgba(5,3,6,.15), rgba(5,3,6,.36)), url("../img/claro-stranger-things/capa.jpg?v=20261001a") center/cover no-repeat;
  filter: blur(20px) saturate(.9);
  opacity: .72;
}
.ct-screen-frame::after { z-index: 2; inset: 62% 0 0; }
.ct-screen-frame > img { position: absolute; z-index: 1; inset: 0; width: 100%; max-width: 100%; height: 100%; object-fit: contain !important; }
.ct-screen-tag { z-index: 3; }
.ct-target { border-color: rgba(229,9,20,.55); box-shadow: 0 0 0 24px rgba(229,9,20,.07), 0 0 0 49px rgba(120,184,227,.04); }

.ct-answer-card { border-color: rgba(229,9,20,.28); background: linear-gradient(135deg, rgba(229,9,20,.08), rgba(60,128,190,.07)); }
.ct-step::before { border-color: rgba(229,9,20,.42); color: var(--ct-red); }
.ct-step:nth-child(even)::before { border-color: rgba(120,184,227,.42); color: var(--ct-cyan); }

.ct-collab-mark {
  border-color: rgba(229,9,20,.34);
  background: radial-gradient(circle at 35% 55%, rgba(229,9,20,.24), transparent 43%), radial-gradient(circle at 67% 45%, rgba(63,138,205,.19), transparent 44%), #0d0910;
}
.ct-collab-mark::before { border-color: rgba(229,9,20,.28); }
.ct-collab-mark::after { border-color: rgba(120,184,227,.3); }
.ct-collab-mark strong span { color: var(--ct-red); }

.st-video-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(229,9,20,.34);
  border-radius: 26px;
  background: #030204;
  box-shadow: 0 32px 90px rgba(0,0,0,.52), 0 0 60px rgba(229,9,20,.07);
}
.st-video-shell::before {
  content: "CASE FILM · CLARO + NETFLIX";
  display: block;
  padding: 14px 18px;
  color: #8d838c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.st-video-shell video { display: block; width: 100%; aspect-ratio: 16/9; background: #000; object-fit: contain; }
.st-video-note { display: flex; justify-content: space-between; gap: 20px; padding: 14px 18px; color: #8d838c; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.st-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st-world {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  margin: 0;
  border: 1px solid var(--ct-line);
  border-radius: 22px;
  background: #09070a;
}
.st-world img { width: 100%; height: 100%; object-fit: cover; }
.st-world::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(4,3,6,.88)); }
.st-world figcaption { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; }
.st-world figcaption span { display: block; margin-bottom: 8px; color: var(--ct-red); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.st-world:nth-child(2) figcaption span { color: var(--ct-cyan); }
.st-world figcaption strong { font-size: clamp(25px,3vw,40px); letter-spacing: -.045em; }

.ct-shot--poster img { object-fit: contain; background: linear-gradient(110deg, #4a1512, #101221 53%, #15344e); }
.ct-video-link { color: #fff; text-underline-offset: 4px; }

@media (max-width: 780px) {
  .ct-hero h1 { font-size: clamp(49px, 14.8vw, 75px); }
  .st-worlds { grid-template-columns: 1fr; }
  .st-world { min-height: 280px; }
  .st-video-note { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .ct-screen-frame { aspect-ratio: 1/1; }
  .st-video-shell { border-radius: 18px; }
}