:root {
      --card-radius: 1.25rem;
      --avatar-size: 92px;
      /* Fallback para quando não houver --bs-primary definido pelo tema */
      --brand-primary-fallback: #2e3697;
    }

    .profile-card {
      position: relative;
      border: 0;
      border-radius: var(--card-radius);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
      overflow: visible;
      /* avatar sobreposto sem cortar */
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease;
      height: 90%;
      background: #fff;
    }

    .profile-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
    }

    .avatar-wrap {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
      width: var(--avatar-size);
      height: var(--avatar-size);
      border-radius: 50%;
      padding: 4px;
      background: #fff;
      /* usa --bs-primary (Bootstrap) se existir; senão o fallback da sua paleta */
      border: 3px solid var(--bs-primary, var(--brand-primary-fallback));
      box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
      z-index: 2;
    }

    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }

    .profile-body {
      padding: 3.5rem 1.25rem 1.5rem;
      /* espaço pro avatar flutuante */
      text-align: center;
    }

    .profile-name {
      font-weight: 700;
      font-size: 1.25rem;
      margin-bottom: .25rem;
    }

    .profile-role {
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .profile-teaser {
      color: #4a4a4a;
      line-height: 1.6;
      margin: 0;
      min-height: 3.6em;
    }

    .modal-avatar {
      width: var(--avatar-size);
      height: var(--avatar-size);
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
      border: 3px solid var(--bs-primary, var(--brand-primary-fallback));
    }

    /* Indicadores usando primária do tema (Bootstrap 4 usa data-target) */
    .carousel-indicators [data-bs-target] {
      background-color: #000000; /* azul bootstrap */
    }

    .carousel-indicators .active {
      background-color: #0d6efd; /* vermelho p/ o botão ativo */
    }