/* Match the secondary link in the Home hero, on this light background. */
.instituciones-page .gc-institutional-video-link {
  display: inline-block;
  font-weight: 600;
  line-height: 1.4;
  color: var(--teal);
  text-decoration: none;
}
.instituciones-page .gc-institutional-video-link:hover {
  text-decoration: underline;
}
#video-institucional {
  scroll-margin-top: var(--video-anchor-offset, 140px);
}
@media (max-width: 800px) {
  .instituciones-page .modality-heading .actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* WEB-AJUSTE-09: stack only the two institutional hero buttons on phones. */
@media (max-width: 600px) {
  .gc-institutional-actions > .button { flex-basis: 100%; width: 100%; }
}

/* WEB-AJUSTE-10: reuse the coverage layout for the square live-view loop. */
.gc-live-view { background: #fff; }
.gc-live-view .coverage-layout { align-items: center; }
.gc-live-view .gc-live-media { grid-row: 1; }
.gc-live-media { width: 100%; aspect-ratio: 1; }
.gc-live-media video { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.gc-live-benefits { margin-top: 24px; padding-left: 20px; color: var(--muted); font-size: 16px; }
.gc-live-benefits li + li { margin-top: 10px; }
@media (min-width: 768px) and (max-width: 1099px) {
  .gc-live-view .gc-live-media { grid-row: 2; max-width: 600px; justify-self: center; }
}

/* WEB-AJUSTE-10D: the loop can be toggled directly. */
.gc-live-media video { cursor: pointer; }