.cx{
  --cx-bg:#131f36;
  --cx-accent:#5b73d6;
  --cx-accent-2:#3f56b8;
  --cx-text:#fff;
  background:var(--cx-bg);
  color:var(--cx-text);
  padding:clamp(56px,9vw,120px) 24px;
}
.cx__inner{
  max-width:1100px;
  margin:0 auto;
}

/* Encabezado */
.cx__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  margin-bottom:40px;
}
.cx__eyebrow{
  margin:0;
  font-family:'JetBrains Mono',monospace;
  font-weight:500;
  font-size:clamp(16px,2vw,22px);
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--cx-accent);
}
.cx__title{
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  font-size:clamp(18px,2.2vw,26px);
  letter-spacing:-.01em;
  text-align:right;
}

/* Contenedor de video */
.cx__video{
  position:relative;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(91,115,214,.22), transparent 45%),
    linear-gradient(135deg,#1a2040 0%,#0d1322 55%,#080b14 100%);
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.cx__video video,
.cx__video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
}

/* Placeholder con rayas diagonales */
.cx__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.035) 0 1px,
    transparent 1px 14px
  );
}
.cx__play{
  width:50px;
  height:50px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  background:linear-gradient(135deg,var(--cx-accent),var(--cx-accent-2));
  box-shadow:0 8px 24px rgba(63,86,184,.5);
  transition:transform .25s ease, box-shadow .25s ease;
}
.cx__play svg{
  width:18px;
  height:18px;
  fill:#fff;
  margin-left:2px;
}
.cx__play:hover,
.cx__play:focus-visible{
  transform:scale(1.1);
  box-shadow:0 10px 32px rgba(91,115,214,.7);
  outline:none;
}
.cx__hint{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

/* Logo */
.cx__logo{
  display:flex;
  justify-content:flex-end;
  margin-top:32px;
}
.cx__logo img{
  width:min(220px,50%);
  height:auto;
}

/* Animación de entrada */
.cx__head,
.cx__video,
.cx__logo{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.cx.is-visible .cx__head,
.cx.is-visible .cx__video,
.cx.is-visible .cx__logo{
  opacity:1;
  transform:none;
}
.cx.is-visible .cx__video{ transition-delay:.15s; }
.cx.is-visible .cx__logo{ transition-delay:.3s; }

/* Móvil */
@media (max-width:640px){
  .cx{ padding:56px 16px; }
  .cx__head{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .cx__title{ text-align:left; }
  .cx__eyebrow{ letter-spacing:.25em; }
  .cx__video{ border-radius:12px; }
}

@media (prefers-reduced-motion:reduce){
  .cx__head,.cx__video,.cx__logo{
    opacity:1;
    transform:none;
    transition:none;
  }
}