:root{ --brand:#21b7f1; }

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-brand { color: var(--brand) !important; }

.section { padding: 3rem 0; }
.card-video{ transition: transform .15s ease-in-out; }
.card-video:hover{ transform: translateY(-2px); }

/* Temas (colores desde tus logos) */
.theme-cirujanos {
  --brand:#284a9e;                 /* Azul cirujanos */
  --brand-contrast:#e5ecff;
  --brand-bg: radial-gradient(1200px 600px at 10% 10%, rgb(41 76 161 / 75%), rgb(196 213 255 / 90%));
}
.theme-medicos {
  --brand:#2d7a2f;                 /* Verde médicos */
  --brand-contrast:#eaffe0;
  --brand-bg: radial-gradient(1200px 600px at 10% 10%, rgba(45,122,47,.35), rgba(233 234 237 / 90%));
}

.hero-brand {
  position: relative; border-radius: 1rem; overflow: hidden; background: var(--brand-bg);
}
.hero-brand .overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.08; }
.hero-brand .content { position:relative; z-index:1; }

.btn-brand { background: var(--brand); border-color: var(--brand); color: white;}
.btn-brand:hover { filter: brightness(.95); }
.text-brand { color: var(--brand) !important; }

.logo-badge { width:120px; height:120px; object-fit:contain; background:rgba(255,255,255,.06); border-radius:999px; padding:8px; border:1px solid rgba(255,255,255,.12); }


.event-card { background: var(--bs-body-bg); }
.event-date { font-variant-numeric: tabular-nums; }
.video-card { cursor: pointer; }


.logo-badge-sm { height: 40vh; object-fit: contain; }
.logo-badge-xs { width: 28px; height: 28px; object-fit: contain; }
@media (max-width: 991.98px){
  .logo-badge-sm { width: 40vw; }
}
.logo-pair img { display: block; }


.link-unstyled { text-decoration: none; color: inherit; }
.link-unstyled:hover, .link-unstyled:focus { text-decoration: none; color: inherit; }

.badge.text-bg-primary, .badge.text-bg-success { text-decoration: none; }
.badge.text-bg-primary:hover, .badge.text-bg-success:hover { filter: brightness(.95); }


@media screen and (orientation: portrait) {
  .banner-logo-text-1{
    display: flex;
    flex-direction: column;
  }
  .banner-logo-text-2{
    display: flex;
    flex-direction: column-reverse;
  }
}

@media screen and (max-width: 520px){
  .navbar-title{
    display: none;
  }
}