/* Ajustes del panel sobre la web del programador. Van aparte de styles.css para que una entrega
   nueva suya no los pise. */

/* 1. Hueco bajo el menú (JC, 18-oct-2026). El hero ocupaba toda la pantalla (100svh) con el texto
      centrado en vertical: en pantallas altas quedaba un hueco grande entre el menú y el título.
      En escritorio alto, el hero mide lo que su contenido y empieza bajo el menú (76 px). */
@media (min-width: 960px) and (min-height: 860px) {
  .hero { min-height: 0; align-items: flex-start; padding-top: 140px; }
}

/* 2. Directo de YouTube en el hero (lib/directo.js): ocupa el sitio de las capturas, con el mismo
      marco de ventana que la ilustración principal (barra azul marino y borde dorado). */
.hero-live { width: 100%; min-width: 0; align-self: center; border-color: rgba(var(--gold-rgb), .45); }
.hero-live .app-bar { background: linear-gradient(180deg, #16325c, var(--ink)); border-bottom-color: rgba(var(--gold-rgb), .35); }
.hero-live .app-title { color: #fff; min-width: 0; }
.hero-live .window-dots i { background: rgba(255, 255, 255, .22); }
.hero-live .window-dots i:first-child { background: var(--gold-metal); }
.hero-live-badge {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .55rem; border-radius: 999px; background: #e5383b; color: #fff;
  font-weight: 700; letter-spacing: .08em; white-space: nowrap;
}
.hero-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: heroLivePulse 1.6s ease-in-out infinite; }
@keyframes heroLivePulse { 50% { opacity: .35; } }
.hero-live-video { aspect-ratio: 16 / 9; background: #0b1730; }
.hero-live-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.hero-live-link {
  display: block; padding: .65rem .95rem; border-top: 1px solid var(--line);
  font-size: .84rem; font-weight: 600; color: var(--ink); text-align: right;
}
.hero-live-link:hover { color: var(--gold-deep); }
@media (prefers-reduced-motion: reduce) { .hero-live-dot { animation: none; } }