/* ============================================================
   Caso — Chatbot de WhatsApp con IA (universidad)
   Estilos LOCALES de esta página. No toca caso.css (compartido
   por los demás casos) ni components.css.
   Solo añade el componente de vídeo (.dg-cd-video), inexistente
   en el sistema. Reusa tokens canonical: --lima, --line, --ink,
   --r-lg, --r-pill, --ease-out, --ink-06.
   ============================================================ */

.dg-cd-video {
  margin: 20px 0 0;
  /* 9:16 vertical: se acota el ancho para que no domine la columna
     de prosa (760px) y quede a la misma altura visual que un bloque. */
  max-width: 360px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(38, 59, 74, 0.12);
  background: var(--ink-06);
}

/* ---- Fachada click-to-load ---- */
.dg-cd-video__facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  background: var(--ink-06);
  cursor: pointer;
  line-height: 0;
  border-radius: inherit;
  overflow: hidden;
}
.dg-cd-video__facade:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: -3px;
}

.dg-cd-video__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dg-cd-video__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(38, 59, 74, 0.42);
  transition: background 200ms var(--ease-out);
}
.dg-cd-video__facade:hover .dg-cd-video__overlay,
.dg-cd-video__facade:focus-visible .dg-cd-video__overlay {
  background: rgba(38, 59, 74, 0.62);
}

.dg-cd-video__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background: var(--lima);
  color: var(--ink);
  flex-shrink: 0;
  /* El icono de play óptico va ligeramente a la derecha del centro
     geométrico; el svg ya lo compensa en su path. */
}
.dg-cd-video__play svg { display: block; }

.dg-cd-video__label {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #fff;
}

/* ---- Iframe una vez cargado ---- */
.dg-cd-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--ink-06);
}
.dg-cd-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .dg-cd-video__overlay { transition: none; }
}