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

:root {
  --ct-bg: #041109;
  --ct-panel: #071810;
  --ct-panel-2: #0b2115;
  --ct-text: #f8fff9;
  --ct-muted: #afc0b3;
  --ct-line: rgba(255,255,255,.14);
  --ct-red: #ef1b2d;
  --ct-cyan: #ffdf36;
  --copa-green: #1f9d4b;
  --copa-blue: #2586db;
}

body::selection { background: var(--ct-cyan); color: #07140b; }
.ct-hero {
  background:
    radial-gradient(circle at 76% 22%, rgba(37,134,219,.24), transparent 31%),
    radial-gradient(circle at 18% 75%, rgba(31,157,75,.22), transparent 34%),
    radial-gradient(circle at 46% 100%, rgba(255,223,54,.09), transparent 25%),
    var(--ct-bg);
}
.ct-hero::before { background: linear-gradient(90deg, transparent, rgba(31,157,75,.55), rgba(255,223,54,.42), rgba(239,27,45,.45), transparent); }
.ct-gridlines {
  opacity: .17;
  background-image: linear-gradient(rgba(255,223,54,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(37,134,219,.13) 1px, transparent 1px);
}
.ct-chip { border-color: rgba(255,223,54,.48); color: #fff3a5; }
.ct-chip::before { background: var(--copa-green); box-shadow: 0 0 16px var(--copa-green); }
.ct-hero h1 { font-size: clamp(55px, 7vw, 101px); }
.ct-hero h1 span { -webkit-text-stroke-color: rgba(255,223,54,.72); }
.ct-button--primary { border-color: var(--ct-red); background: var(--ct-red); box-shadow: 0 16px 44px rgba(239,27,45,.26); }

.ct-screen { border-color: rgba(255,223,54,.38); box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 80px rgba(31,157,75,.12); }
.ct-screen-frame { aspect-ratio: 16/9; }
.ct-screen-frame::after { inset: 53% 0 0; }
.ct-screen-tag i { color: var(--ct-cyan); }
.ct-target { border-color: rgba(255,223,54,.55); box-shadow: 0 0 0 24px rgba(31,157,75,.08), 0 0 0 49px rgba(37,134,219,.05); }
.ct-answer-card { border-color: rgba(255,223,54,.28); background: linear-gradient(135deg, rgba(31,157,75,.11), rgba(37,134,219,.08)); }
.ct-step::before { border-color: rgba(31,157,75,.5); color: #60dd7e; }
.ct-step:nth-child(even)::before { border-color: rgba(255,223,54,.5); color: var(--ct-cyan); }

.ct-collab-mark {
  border-color: rgba(255,223,54,.34);
  background: radial-gradient(circle at 35% 55%, rgba(31,157,75,.28), transparent 43%), radial-gradient(circle at 67% 45%, rgba(239,27,45,.2), transparent 44%), #07150d;
}
.ct-collab-mark::before { border-color: rgba(255,223,54,.32); }
.ct-collab-mark::after { border-color: rgba(239,27,45,.34); }
.ct-collab-mark strong span { color: var(--ct-cyan); }

.copa-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.copa-video-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,223,54,.3);
  border-radius: 24px;
  background: #020604;
  box-shadow: 0 28px 75px rgba(0,0,0,.46), 0 0 50px rgba(31,157,75,.06);
}
.copa-video-shell::before {
  content: "CLARO MUNDOS · ESPECIAL COPA";
  display: block;
  padding: 14px 18px;
  color: #91a596;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.copa-video-shell video { display: block; width: 100%; aspect-ratio: 16/9; background: #000; object-fit: contain; }
.copa-video-note { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; color: #91a596; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.ct-video-link { color: #fff; text-underline-offset: 4px; }
.ct-benefit i { background: rgba(31,157,75,.12); color: #60dd7e; }
.ct-benefit:nth-child(2) i { background: rgba(255,223,54,.11); color: var(--ct-cyan); }
.ct-benefit:nth-child(3) i { background: rgba(239,27,45,.12); color: #ff6c79; }
.ct-shot figcaption { background: rgba(2,14,7,.86); }
.ct-cta-box { border-color: rgba(255,223,54,.28); background: linear-gradient(135deg,#092318,#15180c); }

@media (max-width: 780px) {
  .ct-hero h1 { font-size: clamp(49px, 14.5vw, 76px); }
  .copa-videos { grid-template-columns: 1fr; }
  .copa-video-note { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .copa-video-shell { border-radius: 18px; }
}