/* Vídeo principal de la portada (promo de premios y club, estética urbana).
   Compacto: texto + vídeo en dos columnas; en móvil, el vídeo 9:16 entre el título y la lista. */
.promo-ppal { background: #0c0d0f; border-bottom: 1px solid var(--border); }
.ppal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  grid-template-areas: "cab video" "lista video" "cta video"; }
.ppal-cab { grid-area: cab; align-self: end; }
.ppal-cab .d2 { margin-top: 14px; }
.ppal-lista { grid-area: lista; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ppal-lista li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.ppal-lista li svg { width: 20px; height: 20px; margin-top: 2px; color: var(--rojo-claro); }
.ppal-lista b { color: #fff; font-weight: 650; }
.ppal-cta { grid-area: cta; align-self: start; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ppal-cta .ppal-link { color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--border-2); }
.ppal-cta .ppal-link:hover { color: #fff; border-color: #fff; }

.ppal-video { grid-area: video; position: relative; border-radius: 14px; overflow: hidden; background: #000;
  border: 1px solid var(--border-2); aspect-ratio: 16 / 9; box-shadow: 0 30px 80px -34px rgba(220, 50, 40, .5); }
.ppal-video.vertical { aspect-ratio: 9 / 16; width: min(100%, calc(70vh * 9 / 16)); margin-inline: auto; }
.ppal-video video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.ppal-mandos { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.ppal-boton { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(6, 7, 8, .78); color: #fff; font: 600 13px/1 var(--font);
  cursor: pointer; backdrop-filter: blur(6px); }
.ppal-boton svg { width: 18px; height: 18px; }
.ppal-boton:hover { background: var(--rojo); border-color: var(--rojo); }
.ppal-boton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ppal-boton.solo-icono { width: 40px; padding: 0; justify-content: center; }

@media (max-width: 900px) {
  .ppal { grid-template-columns: 1fr; grid-template-areas: "cab" "video" "lista" "cta"; gap: 24px; }
  .ppal-cab { align-self: auto; }
}
@media (max-width: 560px) {
  .ppal-cta { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; }
  .ppal-cta .ppal-link { align-self: center; }
}